以嵌套的反应形式将必填属性(星号)绑定到父级的表单组验证器

时间:2019-09-12 13:46:51

标签: angular typescript angular-reactive-forms

在此示例中,使用嵌套的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: []
    });
  }
...

0 个答案:

没有答案