Multi tool use

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.

[disabled]="#myForm.invalid"

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

2 Answers
2

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

status

value

statusChanges

export class Component {
@ViewChild('myForm') myForm;
this.myForm.statusChanges.subscribe(
result => console.log(result)
);
}


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

valueChanges

form

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

pending

Valid

Invalid

statusChanges

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.