如何使用 Validator 和 Control Value Accessor 正确实现嵌套表单？

Question

在我的应用程序中，我需要一个可重用的嵌套表单组件，例如 Address。我希望我的AddressComponent 处理它自己的FormGroup，这样我就不需要从外部传递它。 在 Angular 会议 (video, presentation) 上，Angular Core 团队的成员 Kara Erikson 建议为嵌套表单实现 ControlValueAccessor，使嵌套表单实际上只是一个 FormControl。

我也想通了，我需要实现Validator，这样我的嵌套表单的有效性就可以被主表单看到了。

最后我创建了嵌套表单需要扩展的SubForm类：

export abstract class SubForm implements ControlValueAccessor, Validator {

  form: FormGroup;

  public onTouched(): void {
  }

  public writeValue(value: any): void {
    if (value) {
      this.form.patchValue(value, {emitEvent: false});
      this.onTouched();
    }
  }

  public registerOnChange(fn: (x: any) => void): void {
    this.form.valueChanges.subscribe(fn);
  }

  public registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.form.disable()
      : this.form.enable();
  }

  validate(c: AbstractControl): ValidationErrors | null {
    return this.form.valid ? null : {subformerror: 'Problems in subform!'};
  }

  registerOnValidatorChange(fn: () => void): void {
    this.form.statusChanges.subscribe(fn);
  }
}

如果你想让你的组件用作嵌套表单，你需要做以下事情：

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    }
  ],
})

export class AddressComponent extends SubForm {

  constructor(private fb: FormBuilder) {
    super();
    this.form = this.fb.group({
      street: this.fb.control('', Validators.required),
      city: this.fb.control('', Validators.required)
    });
  }

}

除非我从主表单的模板中检查子表单的有效性状态，否则一切正常。在这种情况下会产生ExpressionChangedAfterItHasBeenCheckedError，请参见ngIf 语句（stackblitz code）：

<form action=""
      [formGroup]="form"
      class="main-form">
  <h4>Upper form</h4>
  <label>First name</label>
  <input type="text"
         formControlName="firstName">
         <div *ngIf="form.controls['address'].valid">Hi</div> 
  <app-address formControlName="address"></app-address>
  <p>Form:</p>
  <pre>{{form.value|json}}</pre>
  <p>Validity</p>
  <pre>{{form.valid|json}}</pre>


</form>

Answer 1

使用 ChangeDetectorRef

检查此视图及其子视图。与分离结合使用 实施本地变更检测检查。

这是为防止不一致而设置的警示机制 在模型数据和 UI 之间，以便不显示错误或旧数据 给页面上的用户

参考：https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

参考：https://angular.io/api/core/ChangeDetectorRef

import { Component, OnInit,ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-upper',
  templateUrl: './upper.component.html',
  styleUrls: ['./upper.component.css']
})
export class UpperComponent implements OnInit {

  form: FormGroup;

  constructor(private fb: FormBuilder,private cdr:ChangeDetectorRef) {
    this.form = this.fb.group({
      firstName: this.fb.control('', Validators.required),
      address: this.fb.control('')
    });
  }

  ngOnInit() {
    this.cdr.detectChanges();
  }


}

您的分叉示例：https://stackblitz.com/edit/github-3q4znr

Answer 2

WriteValue 将在与正常变更检测生命周期挂钩的同一摘要周期中触发。

要在不使用 changeDetectionRef 的情况下解决此问题，您可以定义有效性状态字段并进行响应式更改。

public firstNameValid = false;

   this.form.controls.firstName.statusChanges.subscribe(
      status => this.firstNameValid = status === 'VALID'
    );

<div *ngIf="firstNameValid">Hi</div>

Answer 3

尝试在 *ngIf 的立场中使用 [hidden]，它可以在没有 ChangeDetectorRef 的情况下工作。

更新网址：https://stackblitz.com/edit/github-3q4znr-ivtrmz?file=src/app/upper/upper.component.html

<div [hidden]="!form.controls['address'].valid">Hi</div>