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

Question

如果我使用模板驱动的表单，我可以将 FormControl 的引用注入 "error-message" 组件。注意 ngModel 指令的使用（参见 this tutorial）。

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

"error-message" 组件正确接收 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());
    }
    ...
}

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

我们想要解耦事物，以便父级对其子级（"error-message" 组件）一无所知。

我的表单是使用 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 接口来创建值更改挂钩，但我不知道它是否适用于表单控件，也许您应该只为此传递值。

如果有效请告诉我！

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

Reactive forms: how to pass a reference of a FormControl to its child so it can register a value change listener?

angular

angular4-forms