Question

我正在使用 ui-router ，并且下面的视图使用'Controller As'语法访问控制器。我将“无效”类添加到'shift'-radios 容器中。在表单加载时，您可以看到验证必需消息（对于 requestDate 和 shift ）。当 requestDate 和 shift 设置时，验证消息会消失。表格的 $valid 是真的。唯一的问题是 radio-wrapper div上的'无效'类保持不变。

我做错了什么？

<form novalidate ng-submit="_form.$valid && formCtrl.getFormData()" name="_form">
    <div class="datepicker-wrapper clearfix">
        <datepicker date-format="yyyy-MM-dd">
            <input required ng-model="formCtrl.requestDate" name="requestDate" type="text" />
        </datepicker>                       
    </div>
    <div ng-messages="_form.requestDate.$error" role="alert">
        <div ng-message="required">Введите дату</div>
    </div>
    <div class="radio-wrapper clearfix" ng-class="{invalid: _form.shift.$error}">
        <div ng-repeat="shift in formCtrl.shifts" class="item half-width pull-left">
            <label for="<% shift.name %>">
                <input required ng-model="formCtrl.currentShift" 
                       name="shift" 
                       ng-value="shift" 
                       id="<% shift.name %>" 
                       type="radio" />
                <span class="text"><span ng-bind="shift.text"></span></span>
            </label>
        </div>
    </div>
    <div ng-messages="_form.shift.$error" role="alert">
        <div ng-message="required">Укажите смену</div>
    </div>
    <!-- other inputs... -->
</form>

Answer 1

我认为您需要使用$invalid属性，这是一个布尔值，而不是$error属性，这是一个哈希值。

请参阅：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 2

您的ng-class定义正在检查表单控制器的错误属性。您正在检查_form.shift.$error的真实性。即使没有验证错误，此对象也将始终存在。当您没有任何错误时，_form.shift.$error的值为空对象{}，这是真实的。

您应该检查_form.shift.$invalid属性，该属性将正确更新该表单字段是否存在任何问题。

Answer 3

没有_form.shift。输入shift在ng-repeat内声明，因此它是_form上的属性。

要解决此问题，例如，可以在ng-repeat中移动ng-class并使用ng-form引用班次来创建子分组：

<div ng-repeat="shift in formCtrl.shifts" ng-form='nestedShiftForm'>
    <div ng-class="{invalid: nestedShiftForm.shift.$error}">
        <input name="shift" />

我使用ng-class有什么问题？

3 个答案: