Unable to setValidators(Validators.required) from parent component to child component

Question

I have a form which consist of a checkbox and a component named address. So whenever user click the checkbox app should set the address to required field. This is my 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>

This is my component

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();
   }
}

why using setValidators? I think it's better aproach disable the controls https://stackoverflow.com/questions/54517613/dynamic-validations-in-angular-7-enable-setvalidators-depending-on-flags-tr/54518185#comment96057196_54518185 — Eliseo, Feb 13 '19 at 08:05

Nithya Rajan · Accepted Answer · 2019-02-13T05:23:59.260

You should subscribe to the valueChanges of the form control in ngOnInit instead of 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);         
         });
 }

Your component doesn't have any @Input(), so the ngOnChanges life cycle won't get invoked. so the subscribe of the form control can't work. You should subscribe the form control in ngOnInit, so that the valueChanges of the form control gets subscribed.

Difference between these two life cycles explained in Angular Docs

ngOnChanges

Respond when Angular (re)sets data-bound input properties. The method receives >a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties >change.

ngOnInit

Initialize the directive/component after Angular first displays the data-bound >properties and sets the directive/component's input properties. Called once, after the first ngOnChanges().

I think it's more "natural" disable the controls :) – Eliseo Feb 13 '19 at 08:07 — Eliseo, Feb 13 '19 at 08:07

score 1 · Answer 2 · answered Feb 13 '19 at 06:37

there is nothing wrong in your code, why your subscription is not working means you have to subscribe on ngOnInit() not in ngOnChanges() lifecycle hook.

ngOnChanges() invoked whenever @Input param values changes.

For any kind subscription (if you wish to listen some changes or subscribe). It is advisable to put that subscription in the ngOnInit() life cycle.

Note : Don't forget to unsubscribe the subscription at the ngOnDestroy() lifecycle hook. it would save your code from any kind of memory leak, even though angular handles it..

Unable to setValidators(Validators.required) from parent component to child component

2 Answers2