Angular嵌套表单组件

Question

我正在尝试学习更多关于Angular的知识，特别是有可重用的组件作为表单。https://stackblitz.com/edit/angular-ivy-4rggse?file=src/app/sec/sec.component.ts

在这个例子中，我有一个SecComponent，它是一个可以在应用程序的其他地方重用的表单。我的问题是，当我点击提交按钮，它不记录日期的值。(在这个例子中只是一个简单的字符串)。我错过了什么?

谢谢你的帮助

Answer 1

有两种方法可以达到相同的结果

1. 创建一个实现controlValueAccesor的自定义表单控件
2. 创建一个组件并传递FormControl(或Form和a字段)

当你使用自定义表单控件实现controlValueAccesor "key"这个函数是

registerOnChange(fn: any): void {
this.onChangeCb = fn;
}

所以，当我们改变某些东西时我们需要调用函数this.onChangeCb()。您所显示的stackblitz使用了"setter"。如果你使用

this.value="what ever"

调用函数并传播更改。如果你不使用FormGroup或者使用简单的[ngModel]，你就可以得到它。如果你的sec。html只是

<input type="text" [(ngModel)]="value" placeholder="Date" />

另一种方式可以在ngOnInit中写一些像

ngOnInit(){
this.f.get('date').valueChange.subscribe(res=>{
this.value=res;
})
}

第二种方法是MrRobot的答案-但是然后你可以删除所有关于controlValueAccesor-。您传入一个输入formGroup或formControl。实际上，如果只传递表单，您需要子窗体中的formControlName与父窗体中的formControlName相同。通常你可以传入简单的formControl

control:FormControl
@Input('control') set _(value){
this.control =value as FormControl
<input [formControl="control">

使用as

<app-sec [control]="f.get('date')"></app-sec>