我创建了指令my-input,它根据提供给指令的属性输出一个输入。并且在无效输入的情况下,渲染的输入也需要验证并显示错误。该指令工作得很好,但问题是我无法在表单提交上测试这些输入。
假设当页面加载而没有做任何事情,如果我点击提交然后没有任何反应。我希望显示错误,并且文本框将成为错误的高亮显示。
您可以在此处查看实时版本:Plunker
[plnkr]: https://plnkr.co/edit/E89BjKbHGLYt5u4RdTLi?p=preview
请帮助。
答案 0 :(得分:0)
对所有表单输入字段使用Fieldset,它会完美地禁用所有输入,直到响应。
<fieldset ng-disabled="vm.isSaving">
<md-input-container class="md-block mt20">
<md-icon tabindex="-1" md-svg-src="../../images/materialIcons/ic_person_24px.svg" class="name ng-isolate-scope"></md-icon>
<input ng-model="vm.userName" id="txtUserName" type="text" placeholder="Username (required)" ng-required="true">
</md-input-container>
<md-input-container class="md-block">
<md-icon tabindex="-1" md-svg-src="../../images/materialIcons/ic_email_24px.svg" class="email"></md-icon>
<input ng-model="vm.emailAddress" type="email" placeholder="Email (required)" ng-required="true">
</md-input-container>
<md-input-container class="md-block">
<md-icon tabindex="-1" md-svg-src="../../images/materialIcons/ic_email_24px.svg" class="email"></md-icon>
<input ng-model="vm.retypeEmailAddress" type="email" placeholder="Retype Your Email (required)" ng-required="true">
</md-input-container>
<p class="fb">YOUR PASSWORD WILL BE EMAILED</p>
<button type="submit" class="btn btn-lg btn-success w200" data-ng-click="vm.register($event)">Create Account</button>
</fieldset>
e.g。 onclick函数集vm.isSaving = true;如果错误设置为vm.isSaving = false;然后我使用角度材料警报。我用一行称呼它
showAlert('Unable to register', 'Email Address already registered - request password recovery', ev);
见Reusable Angular Material Dialog and Toast for Information Helper and Alert