无法从父组件到子组件的setValidators（Validators.required）

Question

我有一个表单，其中包含一个复选框和一个名为address的组件。因此，每当用户单击复选框时，应将地址设置为必填字段。这是我的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();
   }
}

Answer 1

您应该在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首次显示数据绑定>属性并设置指令/组件的输入属性后初始化指令/组件。在第一次ngOnChanges（）之后调用一次。

Answer 2

您的代码没有任何问题，为什么您的订阅不起作用意味着您必须订阅ngOnInit（）而不是ngOnChanges（）生命周期钩子。

@Input参数值更改时，会调用ngOnChanges（）。

对于任何类型的订阅（如果您想听一些更改或订阅）。建议将该订阅放在ngOnInit（）生命周期中。

注意：不要忘记在ngOnDestroy（）生命周期钩子中取消订阅订阅。它可以保存你的代码免受任何类型的内存泄漏，即使角度处理它..