I a building my apps login form with angular-material and am trying to use it a bit differently than the examples on their page. I just want the required fields to only yell at me if the user tries to submit without filling a field out. Maybe disable the button too? Regardless, if the user only fills one field out and presses enter, I would like it to show that "this is required". Right now it just shows it all the time until you fill it out
Here is what I have : /
I am trying the code from their example page like so -
<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'm using the required logic with the ng-messages below it. I would only like that to show if they have tried to submit without filling out anything. Thanks!
I a building my apps login form with angular-material and am trying to use it a bit differently than the examples on their page. I just want the required fields to only yell at me if the user tries to submit without filling a field out. Maybe disable the button too? Regardless, if the user only fills one field out and presses enter, I would like it to show that "this is required". Right now it just shows it all the time until you fill it out
Here is what I have : https://jsfiddle/5b1tsm2a/6/
I am trying the code from their example page like so -
<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'm using the required logic with the ng-messages below it. I would only like that to show if they have tried to submit without filling out anything. Thanks!
Share Improve this question asked Mar 31, 2015 at 14:56 user2815588user2815588 1- Suggested documentation for forms in angular. Also there are typos "reauired". – ryanyuyu Commented Mar 31, 2015 at 15:01
1 Answer
Reset to default 5Update 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>