Angular 如果输入框为空，如何禁用按钮？如果字段已填充，如何启用

如果用户没有填写输入字段，我希望禁用该按钮。我添加了一个条件

（name.value.length==0 | | email.value.length==0）

这将在加载时禁用按钮，但当在文本字段中输入值时，禁用的按钮不会被删除

这是我的密码：

 <section class="container col-md-12 col-md-offset-3">
      <h1>Add Users</h1>
      <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" #name>
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" #email>
        </div>
        <button type="submit" [disabled]="(name.value.length === 0 || email.value.length === 0)" class="btn btn-default" (click)="getValues($event, name, email)">Add Data</button>
      </form>
    </section>
    <section class="container">
      <h3>Users Details</h3>
      <table class="table">
        <thead>
          <tr>
            <th class="col-md-6">Name</th>
            <th class="col-md-6">Email</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of dataArr">
            <td>{{data.name}}</td>
            <td>{{data.email}}</td>
          </tr>
        </tbody>
      </table>
    </section>

添加用户
名称
电子邮件
添加数据
用户详细信息
名称
电子邮件
{{data.name}
{{data.email}

您可以使用双向数据绑定。例如：

<input type="text" class="form-control" [(ngModel)]="userName">

在下面的代码中，如果userName（在本例中）为空，则该按钮被禁用

<button class="btn btn-primary" [disabled]="userName === ''">Enter name</button>

输入名称

如果您调整它以适合您的代码，它应该可以工作

我会在您的输入中添加“必需”验证，并使用模板驱动的方法

<form #formcontrol="ngForm">
  <input type="text" class="form-control" required>
  <button [disabled]="!formcontrol.form.valid">Enter name</button>
</form>

输入名称
最佳解决方案是使用
[（ngModel）]
的双向绑定来绑定表单数据。也就是说，将模板中的名称和电子邮件值与组件的名称和电子邮件值绑定，如下所示：



然后，您可以通过以下方式轻松禁用该按钮：

添加数据

当前，您正在引用模板数据变量中的email和name的值。这称为单向数据绑定。这样做的目的是，它读取加载时模板的值，当您更新输入字段时，只更新模板数据，而不更新组件中的数据，因此按钮保持禁用状态。
确保[disabled]之后的条件无效（invalid为true），这样，Angular本质上是说，如果特定输入有无效条目，则按钮将被禁用，直到条目有效

<button type="submit" class="btn btn-primary" onclick="window.location.reload()" [disabled]="userForm.invalid">Submit Application</button>

提交申请

这里我的代码是说，如果整个表单无效，则禁用该按钮，直到userForm.invalid为false。
我将执行以下操作：



发送
检查表单是否有效，并将disabled属性添加到按钮[disabled]=“！userName”应为足够。我试图在文本框上使用temp-var-in-template方法时出现了不稳定的行为，按钮注意了这一点。这会更好。@jaucer-如果我们必须检查表单的所有字段，该怎么办？