Question

如果用户未填写输入字段，我希望禁用该按钮。我添加了条件＆＃34;（name.value.length === 0 || email.value.length === 0）＆＃34;它会在加载时禁用该按钮，但是当在文本字段中输入值时，不会删除禁用

 <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>

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

确保[disabled]之后的条件无效（invalid为true），这样Angular实质上是在说，如果该特定输入的输入无效，则该按钮将被禁用，直到该输入有效为止。

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

我的代码在这里说整个表单是否无效，然后禁用该按钮，直到userForm.invalid为false。

Answer 4

我会做类似的事情：

<input type="text" 
       placeholder="name"
       name="name"
       [(ngModel)]="myName"
       #name="ngModel" required>

<input type="text" 
       placeholder="email"
       name="email"
       [(ngModel)]="myEmail"
       #email="ngModel" required>

<button class="classBtn" type="submit"
        [disabled]="name.errors?.required || email.errors?.required">
    SEND
</button>

键位于#name="ngModel" required和#email="ngModel" required上，位于按钮[disabled]="name.errors?.required || email.errors?.required"
中

Answer 5

最适合您的解决方案是使用[(ngModel)]双向绑定来绑定表单数据。也就是说，将模板中的名称和电子邮件值与组件的名称和地址绑定在一起，如下所示：

<input type="text" class="form-control" [(ngModel)]="email" id="exampleInputName2" placeholder="Jane Doe">

<input type="email" class="form-control" [(ngModel)]="email" id="exampleInputEmail2" placeholder="jane.doe@example.com">

然后可以方便地与禁用按钮：

<button type="submit" [disabled]="!name || !email" class="btn btn-default" (click)="getValues($event, name, email)">Add Data</button>

当前，您正在从模板数据变量中引用电子邮件的值和名称。这称为单向数据绑定。这是因为它读取加载时模板的值，并且在您更新输入字段时，仅模板数据被更新，组件中的数据没有被更新，因此按钮保持禁用状态。

如果输入框为空，如何禁用该按钮，如果填写字段则启用

5 个答案: