在angularjs中，如果输入有错误，如何在表单提交时设置对输入的关注？

这是我的代码，如果名字文本框出现错误，如

$error.required

，

$error.pattern

，

$error.minlength

或

$error.maxlength

，我想在表单提交上设置对名字文本框的关注

<form class="form-horizontal" name="clientForm" id="clientForm" novalidate ng-submit="clientForm.$valid" ng-class="{ loading:form.submitting }">
<div class="form-group">
    <label class="col-lg-2 control-label">First Name</label>
    <div class="col-lg-8">
        <input type="text" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />
        <!--<span ng-show="clientForm.firstName.$dirty && clientForm.firstName.$invalid" class="error">First Name is required.</span>-->
        <div class="errors" ng-show="clientForm.$submitted || clientForm.firstName.$touched">
            <div class="error" ng-show="clientForm.firstName.$error.required">
                First Name is required.
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.pattern">
                Enter valid name.
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.minlength">
                First Name is required to be at least 3 characters
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.maxlength">
                First Name cannot be longer than 100 characters
            </div>
        </div>
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button></form>

名字
名字是必需的。
输入有效名称。
名字必须至少包含3个字符
名字不能超过100个字符
拯救

您可以尝试这样做：即在名字输入中添加

ng focus=“clientForm.$error”

<input type="text" ng-focus="clientForm.$invalid" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />

---

您必须使用指令处理此问题。例如：

它将遍历元素并检查

focusNow

属性是否为true。确保错误处理程序代码将表达式设置为true/false

.directive('focusNow', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focusNow, function (value) {
                if (value === true) {
                    for (var i = 0; i < element.length; i++) {
                        var ele = angular.element(element[i].parentNode);
                        if (!ele.hasClass('ng-hide')) { //Skip those elements which are hidden.
                            element[i].focus();
                        }
                    }
                }
            });
        }
    };
});

指令（'focusNow'，函数（$timeout）{ 返回{ 链接：函数（范围、元素、属性）{ 范围$watch（attrs.focusNow，函数（值）{ 如果（值===true）{ 对于（变量i=0；i 在HTML中，您将有：

<input type="text" focus-now="expression" />

---

其中，

表达式

将是一个正常表达式，在出现错误时将计算为true。

此问题与以下问题重复：

您可以在表单上使用指令：

<form accessible-form>
    ...    
</form>

app.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

...    
应用程序指令（'accessibleForm'，函数（）{
返回{
限制：“A”，
链接：功能（范围、要素）{
//在表单元素上设置事件处理程序
元素on（'submit'，函数（）{
//查找第一个无效元素
var firstInvalid=elem[0]。查询选择器（'.ng invalid'）；
//如果我们找到了一个，就聚焦
如果（第一个无效）{
firstInvalid.focus（）；
}
});
}
};
});

这是一个正在工作的Plunker：