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>

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

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

1 个答案: