Angular [disabled]不执行任何操作

Question

I use angular 6.2.1

it should disable the submit button but it does nothing ...

this does nothing [disabled]="!heroForm.form.valid" but this [disabled]="heroForm.form.valid" it works but it's not what i want

when inputs are empty it should disable the button but it doesn't

it disable the button when [disabled]="heroForm.valid" when the form is valid but it's not what i want. I don't know why it's valid when inputs are empty i use required in every input

<form #heroForm="ngForm" (ngSubmit)="hola()">
<div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">First Name</label>
        <input type="text" class="form-control" placeholder="First name" 
required>
      </div>
      <div class="form-group col-md-6">
        <label for="inputEmail4">Last Name</label>
        <input type="text" class="form-control" placeholder="Last name" 
required>
      </div>
    </div>
<button type="submit" class="btn btn-outline-primary" 
[disabled]="!heroForm.form.valid">Sign in</button>
  </form>

Answer 1

Can you try [disabled] = “heroform.invalid”

Here is an example https://stackblitz.com/edit/angular-symxeg?file=src%2Fapp%2Fapp.component.html

you are missing the ngModel property and the name property on the input fields and thats why ngForm doesn't know what to validate

Answer 2

How about

<button type="submit" class="btn btn-outline-primary"
  [disabled]="!heroForm.valid">
  Sign in
</button>