我在子组件中有多个formcontrols,如何在子组件中应用验证器,因此原始表单将变为无效.使用ControlValueAccessor实现它是理想的,但是想从简单的@input表单组开始.
@Component({
selector: 'my-child',template: `
<h1>Child</h1>
<div [formGroup]="childForm">
<input formControlName="firstName">
<input formControlName="lastName">
</div>
`
})
export class Child {
@Input()
childForm: FormGroup;
}
我不知道为什么这个问题被投票,但我觉得它可能对其他人有帮助所以我发布了答案.
在多次尝试绑定子表单组后,我能够成功绑定值
在多次尝试绑定子表单组后,我能够成功绑定值
@Component({
selector: 'my-child',template: `
<h1>Child</h1>
<div [formGroup]="name">
<input formControlName="firstName">
<input formControlName="lastName">
</div>
`,providers: [
{provide: NG_VALUE_ACCESSOR,useExisting: Child,multi: true}
]
})
export class Child implements ControlValueAccessor {
name: FormGroup;
constructor(fb: FormBuilder) {
this.name = fb.group({
firstName:[''],lastName: ['']
});
}
writeValue(value: any) {
if(value) {
this.name.setValue(value);
}
}
registerOnChange(fn: (value: any) => void) {
this.name.valueChanges.subscribe(fn);
}
registerOnTouched() {}
}