如何查找$invalid或$error.必需的,美元的错误.模式使用一个简单的HTML表单和指令

How to look for $invalid, or $error.required, $error.pattern using a simple html form and directive?

本文关键字：一个 HTML 指令 表单 模式 简单 invalid 查找 何查找 error 美元      更新时间：2023-09-26

我正在使用angularJS指令，我想找到每个输入是否有任何错误，例如:所需或模式不正确。

HTML: 

<form validation name="loginForm" ng-submit="form(this)">
     <label> example 1
          <input type="text" name="firstname" ng-model="user.firstname" ng-model-options="{ updateOn: 'mousedown blur'}" required
                   ng-pattern="validationPatterns.firstname">
     </label>
     <label> example 2
            <input type="text" name="lastname" ng-model="user.lastname" ng-model-options="{ updateOn: 'mousedown blur'}" required
                   ng-pattern="validationPatterns.lastname">
     </label>
     <button class="btn" type="submit">Continue</button>
</form>

指令:输出每个输入名字的名字(名字和姓氏，它包括所有的对象，如$required， $errors， $invalid等)

element.find('button').on('click', function () {
    var input = element.find('input');
    angular.forEach(input, function (inputs) {
        var inputName = $(inputs).attr('name');
        console.log(scope.loginForm[inputName]);
    });
});

现在我如何检查每个元素的输入，例如:

如果输入错误。美元[名字]。Required === true，显示错误消息。我想在指令上检查这个而不是HTML

你可以这样做:

<div class="input-group">
        <label for="firstname">Firstname</label> <input name="firstname" type="text"
            class="form-control input-sm" ng-model="user.firstname" required />
        <span
            ng-show="loginForm.firstname.$error.required && loginForm.firstname.$dirty">Required!
        </span>
</div>

希望这对你有帮助!

相关文章：