# Trying to create Angular Form inside UI template

**URL:** <https://discourse.nodered.org/t/trying-to-create-angular-form-inside-ui-template/57717>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [3 February 2022 12:07 UTC](https://discourse.nodered.org/t/trying-to-create-angular-form-inside-ui-template/57717 "2022-02-03T12:07:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sulomus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sulomus/32/49578_2.png) [@Sulomus](https://discourse.nodered.org/u/Sulomus)\
**Post date:** [3 February 2022 12:07 UTC](https://discourse.nodered.org/t/trying-to-create-angular-form-inside-ui-template/57717/1 "2022-02-03T12:07:22Z")

</div>

Hello everyone!

- I am trying to use the `ui_template` to use reactive Angular form.

- My goal for now is to have 2 required inputs and disable / enable button depending on if they are filled.

I managed to make together easy example of the form:

```auto
<script>
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }
</script>

<md-content layout-padding>
<form name="form" [formGroup]="form">
    <md-input-container class="md-block" flex-gt-sm>
      <label> Numeric </label>
      <input type="number" required name="number"/>
    </md-input-container>
    
    <md-input-container class="md-block" flex-gt-sm>
      <label> Text </label>
      <input type="text" required name="number"/>
    </md-input-container>
    
    <md-button type="submit" ng-click="send({payload:action()})" class="btn btn-primary" [disabled]="!form.valid">
        Submit
    </md-button>
</form>
</md-content>

```

I want to disable the submit button with this code: `[disabled]="!form.valid"` but the button is always enabled:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f49a76049600c3a9f62d999e95d346d5e7bf368.png)

And weird thing is that when I click the `submit` button my message in the script is send + also the inputs notify me they are no filled:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/217fd32af5c1d31d02bb1784f289e30824411c1c.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09f6897fc7786d5b1d4be446daf863e4295936c2.png)

**Can anyone help me with this?**

_I don't wanna use the `form` node because I want to set limits to the numeric values. And as suggested in [this post](https://discourse.nodered.org/t/set-bounds-on-form-number-inputs/3041/4) it cant be done._

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [3 February 2022 14:40 UTC](https://discourse.nodered.org/t/trying-to-create-angular-form-inside-ui-template/57717/2 "2022-02-03T14:40:26Z")

</div>

Maybe you dont need to disable the Submit button because if you do the re-validation will not trigger and you will not get the new validation error msgs.

Try this (blocking the send command if the form validation fails ? )

```auto
<md-content layout-padding>
  <form name="form" ng-submit="sendMsg(form)">
    <md-input-container class="md-block" flex-gt-sm>
      <label> Numeric </label>
      <input type="number" ng-model="input1" required name="number"/>
    </md-input-container>

    <md-input-container class="md-block" flex-gt-sm>
      <label> Text </label>
      <input type="text" ng-model="input2" required name="number"/>
    </md-input-container>

    <md-button type="submit" class="btn btn-primary">
      Submit
    </md-button>
  </form>
</md-content>

<script>

var theScope = scope;  
var value = "hello world";

// or overwrite value in your callback function ...
//theScope.action = function() { return value; }

theScope.sendMsg = function(form) { 
  if (form.$valid) {
  theScope.send({ payload: { 
    input1: theScope.input1,
    input2: theScope.input2
  }}) 
  }
  
}

</script>

```

ps. see the code of the second example of the [AngularJS Material web site](https://material.angularjs.org/latest/demo/input)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 April 2022 14:40 UTC](https://discourse.nodered.org/t/trying-to-create-angular-form-inside-ui-template/57717/3 "2022-04-04T14:40:37Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.