角度材料表单验证

Question

如果我的 FormGroup 的字段是模型绑定的，ala [(ngModel)]，并且在页面加载时填充，例如由于服务，我的提交按钮，它被保护为[disabled]="biodataForm.status !== 'VALID'"，不会被禁用。如果表格出现空白并且我正常填写，那么当表格正确填写时，警卫会通过。如果通过数据绑定填充了相同的确切值，则 biodataForm.status 值将保持无效，直到我更改每个字段的值。

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

我的表单标记如下所示：

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

``

我围绕这个表单的 Angular 组件看起来像这样（为了清楚起见省略了细节，完整的源代码在这里）：

export class WelcomeComponent {
  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);
  firstnameFormControl = new FormControl('', [Validators.required]);
  lastnameFormControl = new FormControl('', [Validators.required]);
  phoneFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern(/(\(?[0-9]{3}\)?-?\s?[0-9]{3}-?[0-9]{4})/)
  ]);
  // addressFormControl = new FormControl('', [Validators.required]);
  biodataForm: FormGroup = new FormGroup({
    email: this.emailFormControl,
    firstname: this.firstnameFormControl,
    lastname: this.lastnameFormControl,
    phone: this.phoneFormControl
    // address: this.addressFormControl
  });

  getEmailErrorMessage() {
    return this.emailFormControl.hasError('required') ? 'You must enter a value' :
      this.emailFormControl.hasError('email') ? 'Not a valid email' : '';
  }
  getPhoneErrorMessage() {
    return this.phoneFormControl.hasError('required') ? 'You must enter a value' :
      this.phoneFormControl.hasError('pattern') ? 'Format must be (xxx) xxx-xxxx' : '';
  }
  getRequiredErrorMessage(field) {
    return this.biodataForm.get(field).hasError('required') ? 'You must enter a value' : '';
  }

  constructor(
    public _memberdata: MemberDataService,
    private _api: ApiService,
    private _router: Router,
    private _snackBar: MatSnackBar) { }

  handleNext() {
     // ... handle button click
  }
}

``

Answer 1

表单本身可以检查有效和无效。下面应该工作：

[disabled]="biodataForm.invalid"

有关 Angular 表单组的信息可以在以下位置找到：https : //angular.io/api/forms/FormGroup

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