当 Angular5 中的字段为空时禁用按钮 [无效形式]

Question

我正在学习 Angular5，这是新手。

我有两个输入框，一个按钮。处理了这两个字段的验证，将在输入两个字段后启用该按钮。当表单无效时，我已禁用按钮。但它不起作用。

<form class="customerRegisteration-form">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

如有不妥请多多指教

提前致谢。

Answer 1

您的表单应该有一个 formGroup as

<form  [formGroup]="customerRegisteration">

或

 <form class="customerRegisteration-form" #customerRegisteration="ngForm">

然后，

<button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">

Answer 2

您只需在您的标签中添加 #customerRegisteration="ngForm"，如下所示

<form class="customerRegisteration-form" #customerRegisteration="ngForm">

完整代码是

<form class="customerRegisteration-form" #customerRegisteration="ngForm">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

注意。我建议您阅读 Angular Forms Article 以及您对 angular 表格有很多疑问

当 Angular5 中的字段为空时禁用按钮 [无效形式]

Disable the button when fields are empty in Angular5 [ invalid form ]

angular-validation

angular