Let us check how we can disable submit button of a form until all mandatory fields are filled. Angular folks made these things very simple, before explaining those you can check this link to know how it was in Angular js 1. Let us create a simple form first.
Above one is a simple form which has first name and last name and first name we made as mandatory by adding required type. Now see below code which will disable the submit button until mandatory field are filled.
It is the default style of the mat-form-field that is used to display the input-box with an underline. Standard appearance: It is a new version of the legacy appearance. It is more consistent with the fill and outline appearances. Fill appearance: In addition to the underline, it shows the mat-form-field with a filled background box. To disable the text field, add the disabled attribute to the input element and add the mdc-text-field-disabled class to the mdc-text-field element. Text field with helper text The helper text provides supplemental information and/or validation messages to users.
Here we have added #myForm='ngForm' to form body and also added [disabled]='!myForm.form.valid' to submit button. Our job is over, angular made us everything easy. Now let us check with some more example. Let us add max length and min length.
Now let us check with pattern validation, it was ng-pattern in Angular js 1 here is is just pattern.
Basically you don’t need to worry about validation, angular will take care for you.
Full example
Update the plunker and test your changes.
Dont forgot to import form module.
In this article we have discussed about form validation, basically disabling submit button until all mandatory fields are filled.
Related Info
Mat Input Set Disabled Windows
1. Share data between components using a service file.
2. Create reusable component and share data between them.
Mat Input Set Disabled Windows 10
3. Angular client side pagination.
Mat Input Set Disabled File
4. Angular show more/less pagination