时间戳

首页 > 解决方案 > 无法从父组件到子组件 setValidators(Validators.required)

angular - 无法从父组件到子组件 setValidators(Validators.required)

问题描述

我有一个表单，它由一个复选框和一个名为地址的组件组成。因此，每当用户单击复选框应用程序时，应将地址设置为必填字段。这是我的 HTML。

<form [formGroup]="registerForm">
   <app-address-input formControlName="address"></app-address-input><br>
   <input type="checkbox" formControlName="check"> Check?
</form>
<p>Form value: {{ registerForm.value | json }}</p>
<p>Form status: {{ registerForm.status | json }}</p>

这是我的组件

export class AppComponent implements OnChanges {
  registerForm = new FormGroup({
      address: new FormControl(undefined),
      check: new FormControl(undefined)
  });
  get address() {
      return this.registerForm.get('address')
  }
  get check() {
      return this.registerForm.get('check')
  }
  ngOnChanges() {
      this.registerForm.get('check').valueChanges.pipe(tap(val => {
      if(val){
            this.registerForm.get('address').setValidators(Validators.required)
       }
        this.registerForm.get('address').updateValueAndValidity();
      })).subscribe();
   }
}

标签： angularnested-formsangular-reactive-forms

解决方案

您应该在ngOnInit中订阅表单控件的 valueChanges而不是ngOnChanges

 ngOnInit() {
        this.registerForm.get('check').valueChanges.subscribe( (val) => {
           if(val){
              console.log(val)
                 this.registerForm.get('address').setValidators(Validators.required)
            }
            this.registerForm.get('address').updateValueAndValidity();
            console.log(this.registerForm.valid);         
         });
 }

您的组件没有任何 @Input()，因此不会调用ngOnChanges生命周期。所以表单控件的订阅不起作用。您应该在ngOnInit中订阅表单控件，以便订阅表单控件的 valueChanges。

Angular Docs 中解释了这两个生命周期之间的区别

ngOnChanges

当 Angular（重新）设置数据绑定输入属性时做出响应。该方法接收 > 当前和先前属性值的 SimpleChanges 对象。在 ngOnInit() 之前以及每当一个或多个数据绑定输入属性 > 更改时调用。

ngOnInit

在 Angular 首次显示数据绑定 >properties 并设置指令/组件的输入属性之后初始化指令/组件。在第一个 ngOnChanges() 之后调用一次。

推荐阅读