Validate form using Angular material

Question

How can I verify the form using the Angular material, I need the functionality: 1) When I click the "Submit" button, error messages will appear if the required fields are empty. 2) Do not send a mail request (do not send) if the form fields are invalid. The following code avoids sending, but it does not display error messages when pressed, only when the cursor leaves each input field.

<form name="userForm"> <md-input-container> <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> <div ng-message="required">This is required!</div> </div> </md-input-container> <md-input-container> <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> <div ng-messages="userForm.Password.$error"> <div ng-message="required">This is required!</div> </div> </md-input-container> <md-input-container> <md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()"> Create </md-button> </md-input-container> </form> 

Answer 1

You are missing two things.

First: add type="submit" to the md-button element.

Second: add novalidate to the form element:

Note that novalidate is used to disable validation of your own browser form.

You should also use ng-submit on the form element instead of using ng-click on the button.

 <form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()"> <md-input-container> <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> <div ng-message="required">This is required!</div> </div> </md-input-container> <md-input-container> <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> <div ng-messages="userForm.Password.$error"> <div ng-message="required">This is required!</div> </div> </md-input-container> <md-input-container> <md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()"> Create </md-button> </md-input-container> </form>