CODEWITHSUNDEEP
angularnested-formsangular-reactive-forms
Jin
Jin

Reputation: 162

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

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

Upvotes: 1

Views: 2058

Answers (2)

Abhishek Gautam
Abhishek Gautam

Reputation: 1767

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..

Upvotes: 1

Nithya Rajan
Nithya Rajan

Reputation: 4884

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().

Upvotes: 2

Related Questions