使用 UI Utils 进行 Angular 表单验证

Posted 2023-05-09

【中文标题】使用 UI Utils 进行 Angular 表单验证

【英文标题】：Angular form validation with UI Utils

【发布时间】：2014-11-26 18:44:30

【问题描述】：

我希望验证表单并在没有表单错误的情况下禁用提交。我正在利用 UI Utils。电子邮件验证、密码匹配和密码消息有效，只是提交无效。

<div class="modal-body" ng-controller="registerFormController">
    <div class="facebookButton">
        <div class="lucida">Sign In With Facebook</div>
    </div>

    <form ng-submit="processForm()" name="registerForm" name="password" class="registerForm">
        <input type="email" placeholder="Email" class="registerEmail block" ng-model="formData.email">

        <input type="password" placeholder="password" required class="registerPassword block" ng-model="formData.password">

        <input type="password" placeholder="password" name="password2" required ui-validate=" '$value==formData.password' " ui-validate-watch=" 'formData.password' "class="registerPassword2 block" ng-model="formData.password2">

        <span ng-show="registerForm.password2.$error.validator">Passwords do not match!</span>


        <button type="submit" class="create-account" ng-disabled="'!registerForm.$error.validator'">Create Account</button>
    </form>
</div>

如果需要 CodePen / PLNKR 或任何其他代码，我绝对可以提供。提前感谢一堆。

【参考方案1】：

您需要将标记更改为：

<button type="submit" class="create-account" ng-disabled="registerForm.$invalid">Create Account</button>

您还需要从表单标签中删除它：

name="password" 

【讨论】：

不知道为什么“name=password”在那里。工作！谢谢。