如果输入框为空，如何禁用按钮；填充字段时如何启用 [英] How Do I disable the button if the input box is empty and enable when field is filled

问题描述

如果用户未填写输入字段，我希望禁用按钮.我添加了一个条件(name.value.length === 0 || email.value.length === 0)，该条件会在加载时禁用按钮，但是当在文本字段中输入值时，禁用状态不会被删除.

I want the button disabled if the user has not filled the input fields. I added a condition (name.value.length === 0 || email.value.length === 0) This disables the button on load but when values are input in the text fields the disabled is not removed.

这是我的代码:

 <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="[e-mail]" #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>

推荐答案

您可以使用双向数据绑定.例如:

You can use two-way data binding. For example:

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

在下面的代码中，如果userName(在这种情况下)为空，则该按钮被禁用.

In the code below, the button is disabled if userName (in this case) is empty.

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

如果您对此进行调整以适合您的代码，它应该可以工作.

If you tweak this to fit your code, it should work.

这篇关于如果输入框为空，如何禁用按钮；填充字段时如何启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！