angular – 如果输入框为空,如何禁用按钮,并在填充字段时启用

发布时间：2020-12-17 17:33:47 所属栏目：安全来源：网络整理

导读：如果用户未填充输入字段,我希望禁用该按钮.我添加了一个条件“(name.value.length === 0 || email.value.length === 0)”它会在加载时禁用该按钮,但是当在文本字段中输入值时,不会删除禁用的 section class="container col-md-12 col-md-offset-3" h1Add Use

如果用户未填充输入字段,我希望禁用该按钮.我添加了一个条件“(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>

解决方法

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

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

在下面的代码中,如果userName(在本例中)为空,则禁用该按钮.

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

如果你调整它以适合你的代码,它应该工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!