首页 文章

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

提问于
浏览 次
0

如果我使用模板驱动的表单，我可以将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未定义，我无法注册更改事件侦听器 .

Does anyone know a way to pass a FormControl reference to its child with a reactive form so that I can register a valueChange listener ? 我想's missing is this ngModel stuff but I don'知道如何以反应形式传递它 .

@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: ''});
}
...
angular angular4-forms

1 回答

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

    这应该工作 .

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

    如果有效，请告诉我！

    回复于

相关问题