Невозможно установитьValidators (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 (), а не на ловушку жизненного цикла ngOnChanges ().

ngOnChanges () вызывается всякий раз, когда изменяется значение параметра @Input.

Для любой подписки (если вы хотите прослушать некоторые изменения или подписаться).Рекомендуется поместить эту подписку в жизненный цикл ngOnInit ().

Примечание. Не забудьте отменить подписку в ловушке жизненного цикла ngOnDestroy ().это спасло бы ваш код от любой утечки памяти, даже если его обрабатывает Angular ..

Answer 2

Вы должны подписаться на valueChanges элемента управления формы в ngOnInit вместо 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 ().