Trying to create Angular Form inside UI template

[Sulomus]

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:

<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:

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:

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 it cant be done.

[UnborN]

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 ? )

<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