Question

如果我的FormGroup的字段是模型绑定的，ala [（ngModel）]，并在页面加载时填充，例如因为服务，我的提交按钮被保护为<div class="card"> <div class="card-header"> <h3 class="text-center">Works</h3> </div> <div class="card-body">  <div class="row text-center no-gutters">  <div class="col"> <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works"> <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works"> </div> <div class="col"> <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works"> <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works"> </div> </div> </div> </div>，不会被禁用。如果表格出现空白并且我正常填写，则表格正确填写时，警卫会通过。如果通过数据绑定填充相同的确切值，则biodataForm.status值将保持无效，直到我更改每个字段的值。

我的感觉是，在填充数据绑定后，表单应该识别它具有有效内容，并且其状态应该从INVALID变为VALID，结果......这里出了什么问题？

我的表单标记如下所示：

[disabled]="biodataForm.status !== 'VALID'"

```

围绕此表单的我的Angular组件如下所示（为清晰起见省略了详细信息，完整源代码为here）：

  <form class="form" name="biodataForm" [formGroup]="biodataForm">
    <mat-form-field class="full-width">
      <input matInput placeholder="First Name" 
        required
        [(ngModel)]="_memberdata.firstname"
        [formControl]="firstnameFormControl">
      <mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>        
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Last Name" 
        required
        [(ngModel)]="_memberdata.lastname"
        [formControl]="lastnameFormControl">
      <mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>                
    </mat-form-field>
    <mat-form-field class="full-width"
      hintLabel="Note: We'll send you an email with a link to click to prove it's you">
      <input matInput placeholder="Email" 
        required
        [(value)]="_memberdata.email"
        [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>        
    </mat-form-field>    
    <mat-form-field class="full-width">
      <input matInput placeholder="Phone" type="tel" 
        [(value)]="_memberdata.phone"
        required
        [formControl]="phoneFormControl">
      <mat-error *ngIf="phoneFormControl.invalid">{{getPhoneErrorMessage()}}</mat-error>
    </mat-form-field>        
    <button mat-raised-button color="primary" 
      class="submit-button"
      [disabled]="biodataForm.status !== 'VALID'"
      (click)="handleNext()">Next Step</button>
  </form>

```

Answer 1

可以使用有效和无效的方式检查表单本身。以下应该有效：

[disabled]="biodataForm.invalid"

有关Angular表单组的信息，请访问：https://angular.io/api/forms/FormGroup

此外，电子邮件和电话输入......您正在使用[（值）] ...将这些更改为[（ngModel）]，它应该按您期望的方式工作。

角度材料表格验证

1 个答案: