javascript Angular，材料表单只说提交尝试后需要字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29371745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular, material form only say field is required after submit attempt
提问by
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
我使用 angular-material 构建了我的应用程序登录表单，并尝试使用与他们页面上的示例略有不同的方式。如果用户尝试提交而不填写字段，我只希望必填字段只对我大喊大叫。也许也禁用按钮？无论如何，如果用户只填写一个字段并按回车键，我希望它显示“这是必需的”。现在它只是一直显示它直到你填写它
Here is what I have : https://jsfiddle.net/5b1tsm2a/6/
这是我所拥有的：https: //jsfiddle.net/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!
所以我将所需的逻辑与它下面的 ng-messages 一起使用。我只想显示他们是否尝试在不填写任何内容的情况下提交。谢谢！
回答by nitin
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>
