angular 子组件的验证状态不会传播到主组件

Question

我在 Angular 中有一个主组件 - 子组件排列，带有反应性 forms。

通过使用 ControlValueAccessor，子组件的值从子组件的 formGroup“传播”到主组件的 formGroup。

这是子组件的 formGroup：

public formGroup = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
});

这是主组件的 formGroup：

public readonly masterFormGroup = this.formBuilder.group({
  nameInput: [],
});

这是主组件的模板：

<div [formGroup]="masterFormGroup">
  <name-input
    formControlName="nameInput"
  ></name-input>
</div>

但验证状态不会传播。 当子组件的状态为无效时，主组件的状态为有效！

如何在主组件中获取真实状态？

整个事情都在 StackBlitz 上： https://stackblitz.com/edit/angular-ivy-f7fy5b?file=src/app/app.component.ts

Answer 1

我通过@Input()装饰器将 FormGroup 传递给子组件来实现这一点。

堆栈叉