CODEWITHSUNDEEP
angularformsangular5angular-reactive-formsangular-forms
Cec
Cec

Reputation: 1816

angular 5 template forms detect change of form validity status

are reactive forms the way to go in order to have a component that can listen for changes in the validity status of the form it contains and execute some compoment's methods?

It is easy to disable the submit button in the template using templateRef like [disabled]="#myForm.invalid", but this does not involve the component's logic.

Looking at template forms' doc I did not find a way

Upvotes: 54

Views: 70960

Answers (5)

Gangula
Gangula

Reputation: 7294

In addition to statusChanges you can further extend it by adding .pipe(distinctUntilChanged()) to trigger the subscription only when there is change in status - as mentioned here.

Without this pipe the statusChanges subscription gets triggered eveytime a value changes - making it almost similar to valueChanges

this.myForm.statusChanges
    .pipe(distinctUntilChanged())
    .subscribe((status) => {
        if (status === 'VALID') {
            // logic for Valid status
        }

        if (status === 'INVALID') {
            // logic for Invalid status
        }
    })

Upvotes: 0

Muhammad Umar
Muhammad Umar

Reputation: 1659

I could be late to the party but @Viewchild('anything') may lead to this error

Cannot read properties of undefined (reading 'statusChanges')
Cannot read properties of undefined (reading 'valueChanges')

You can simply subscribe to the form. Code Example:

form:FormGroup;

ngOnInit(){
this.form.valueChanges.subscribe((result: any) =>
      console.log('values changes here') );}

Upvotes: 2

Sravan
Sravan

Reputation: 18647

If you want to get only the status and not the value you can use statusChanges:

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

If you even want data changes, you can subscribe to the valueChanges of the form and check the status of the form using this.myForm.status:

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

Possible values of status are: VALID, INVALID, PENDING, or DISABLED.

Here is the reference for the same

Upvotes: 95

Chris Halcrow
Chris Halcrow

Reputation: 31950

You can do something like this do detect a validity change and execute a method based on whether the form is VALID or INVALID.

this.myForm.statusChanges
  .subscribe(val => this.onFormValidation(val));

onFormValidation(validity: string) {
  switch (validity) {
    case "VALID":
      // do 'form valid' action
      break;
    case "INVALID":
      // do 'form invalid' action
      break;
  }
}

Upvotes: 11

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10137

You can subscribe to the whole form changes and implement your logic there.

@ViewChild('myForm') myForm;

this.myForm.valueChanges.subscribe(data => console.log('Form changes', data));

Upvotes: 1

Related Questions