在此示例中,使用嵌套的Angular反应形式组,如何基于{{1}是否以动态方式绑定[required]
的{{1}}属性(请参见myChildFormControl
) }父组件中的}是否应用了TODO
验证程序(由于进行了myChildFormControl
调用)?
一种可行的解决方案是在子组件中添加Validators.required
并更新对setChildRequired()
的调用中的输入,但这似乎是在重复反应式应提供的工作。
子表单模板:
@Input isRequired
子表单组件:
setChildRequired()
父母表格模板:
<form [formGroup]="myChildFormGroup">
<input formControlName="myChildFormControl" [required]="TODO" />
</form>
父表单组件:
...
@Component({
selector: 'app-my-child-form',
templateUrl: './my-child-form.component.html'
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyChildForm),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MyChildForm),
multi: true
}
]
})
export class MyChildForm implements OnInit, ControlValueAccessor, Validator {
constructor(
private formBuilder: FormBuilder
) {}
myChildFormGroup: FormGroup;
ngOnInit() {
this.myChildFormGroup = this.formBuilder.group({
myChildFormControl: []
});
}
...