反应式表单：如何将 FormControl 的引用传递给其子项，以便它可以注册值更改侦听器？

Question

如果我使用模板驱动的表单，我可以将 FormControl 的引用注入到“错误消息”组件中。请注意 ngModel 指令的使用（请参阅本教程）。

<input type="text" name="myFormControl" #myFormControl="ngModel" ngModel />
<error-message [control]="myFormControl" key="foo.bar" />

这几乎适用于反应式表单（我必须使用 formControlName 指令，但我不能使用 ngModel 的东西）。

<input type="text" formControlName="myFormControl" #myFormControl />
<error-message [control]="myFormControl" key="foo.bar" />

“错误消息”组件正确接收 FormControl（this.control 已设置）但 this.control.valueChanges 未定义，我无法注册更改事件侦听器。

有谁知道一种将 FormControl 引用传递给具有响应式表单的子项的方法，以便我可以注册 valueChange 侦听器？我想缺少的是这个 ngModel 的东西，但我不知道如何以反应形式传递它。

@Component({
    selector: 'error-message',
    ...
})
export class ErrorMessageComponent implements OnInit {
    @Input()
    private control: AbstractControl;
    @Input()
    private path: String;

    ngOnInit() {
        this.control.valueChanges.subscribe(() => hideErrorMessage());
    }
    ...
}

---

更多背景信息：表单数据的验证逻辑专门在我的应用程序后端实现。验证错误作为简单的映射条目发送。每个键等于数据模型的一个字段的路径。我编写了一个“错误消息”组件，它将这样一个键作为参数并订阅某些服务，以便它可以在发生验证错误时接收验证错误。我希望这个组件还保留对其父级（即 FormControl）的引用，以便在发生错误时更新其样式，并在用户更改他放入 FormControl 的内容时重置错误消息。

我们想要解耦事物，以便父级对其子级（“错误消息”组件）一无所知。

我的表单是一个使用 FormBuilder 构建的简单反应式表单。

...
constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.myFormGroup = this.formBuilder.group({myFormControl: ''});
}
...

Answer 1

<form [formGroup]="myForm">
  <input type="text" formControlName="myControl" />
  <error-message [control]="myForm.get('myControl')" key="foo.bar" />
</form>

这应该有效。

另外，我猜您可以使用该OnChanges接口来创建一个值更改挂钩，但我不知道它是否适用于表单控件，也许您应该仅为此传递值。

让我知道它是否有效！