以角度形式验证表单提交（外部）上的输入字段（内部指令）

Question

我创建了指令my-input，该指令根据提供给指令的属性输出输入。 并且在无效输入的情况下，渲染的输入也需要进行验证并显示错误。 该指令工作得很好，但问题是我无法在表单提交上测试这些输入。

假设页面加载时没有执行任何操作（如果我单击提交），那么什么也不会发生。 我希望显示错误，并使文本框突出显示该错误。

您可以在此处查看实时版本： Plunker

[plnkr]: https://plnkr.co/edit/E89BjKbHGLYt5u4RdTLi?p=preview

请帮忙。

Answer 1

将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> 

例如onclick函数设置vm.isSaving = true; 如果错误设置为vm.isSaving = false; 然后我使用有角度的材质警报 我叫它一行

 showAlert('Unable to register', 'Email Address already registered - request password recovery', ev); 

请参阅此处可重复使用的角度材料对话框和信息助手和警报的Toast