Angular [禁用] 什么都不做

Question

我使用角度 6.2.1

它应该禁用提交按钮，但它什么也不做......

这没有任何作用 [disabled]="!heroForm.form.valid" 但是这个 [disabled]="heroForm.form.valid" 它可以工作，但这不是我想要的

当输入为空时，它应该禁用按钮，但它不会

当表单有效时 [disabled]="heroForm.valid" 禁用按钮，但这不是我想要的。我不知道为什么当输入为空时它是有效的，我在每个输入中都使用 required

<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

你可以试试[disabled] = “heroform.invalid”

这是一个例子 https://stackblitz.com/edit/angular-symxeg?file=src%2Fapp%2Fapp.component.html

您缺少输入字段上的 ngModel 属性和 name 属性，这就是 ngForm 不知道要验证什么的原因

Answer 2

怎么样

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