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

Question

在我的应用程序中，我需要一个可重用的嵌套表单组件，例如Address。我希望自己AddressComponent处理自己的 FormGroup，这样我就不需要从外部传递它。在 Angular 会议（视频、演示）上，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代码）：

<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

WriteValue 将在与正常更改检测 lyfe 周期挂钩相同的摘要周期中触发。

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

public firstNameValid = false;

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

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