Angular, only the form of the material - the field is required after sending the attempt

Question

I create a login form using angular material and try to use it a little differently than the examples on my page. I just want the required fields to only shout at me if the user tries to submit without filling out the field. Maybe turn off the button too? Regardless if the user fills in only one field and presses enter, I would like him to show that "this is required." Now he just shows it all the time until you fill it

Here is what I have: https://jsfiddle.net/5b1tsm2a/6/

I am trying to execute code from their sample page like this:

<form ng-submit="authenticate()" name="loginForm"> <md-input-container> <label>Username</label> <input name="name" reauired ng-model="loginInfo.username"> <div ng-messages="projectForm.description.$error"> <div ng-message="required">This is required.</div> </div> </md-input-container> <md-input-container> <label>Password</label> <input name="password" reauired type="password" ng-model="loginInfo.password"> <div ng-messages="projectForm.description.$error"> <div ng-message="required">This is required.</div> </div> </md-input-container> <md-button ng-click="authenticate()" class="md-primary btn btn-primary">Login</md-button> </form> 

So, I am using the required logic with ng messages below it. I would only like to show if they tried to file without filling in anything. Thanks!

Answer 1

Update your code as below:

 <form ng-submit="authenticate()" name="loginForm"> <md-input-container> <label>Username</label> <input name="username" ng-model="loginInfo.username" required/> <div ng-messages="loginForm.username.$error" ng-if='loginForm.username.$dirty'> <div ng-message="required">This is required.</div> </div> </md-input-container> <md-input-container> <label>Password</label> <input name="password" type="password" ng-model="loginInfo.password" required/> <div ng-messages="loginForm.password.$error" ng-if='loginForm.password.$dirty'> <div ng-message="required">This is required.</div> </div> </md-input-container> <md-button type="submit" class="md-primary btn btn-primary">Login</md-button> </form>