javascript - 我使用 ng-class 有什么问题?

标签 javascript angularjs

我正在使用 ui-router,下面的 View 使用 'Controller As' 语法访问 Controller 。我将“无效”类添加到 'shift'-radios 容器中。加载表单时,您可以看到两个验证required 消息(对于requestDateshift)。当 requestDateshift 设置时,验证消息消失。表单的 $valid 为真。唯一的问题是 radio-wrapper div 上的 'invalid' 类保留了下来。

我做错了什么?

<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>

最佳答案

我认为您需要使用 $invalid 属性,它是一个 bool 值,而不是 $error 属性,它是一个哈希值。

参见:https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

关于javascript - 我使用 ng-class 有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42629953/

相关文章:

Visual Studio 2013 无法识别 JavaScript

javascript - 无法使用 Angular 将文件上传到 Rails 服务器

javascript - 无法使用 PHP 和 Angularjs 获取 JSON 数据

javascript - angularjs - ui-router 添加模块

javascript - 是否可以获取一个巨大的字符串并将其作为 JavaScript 通过 URL 路径加载?

javascript - 在 AngularJS 中将下拉菜单设置为特定值

html - 如何使用插值来设置属性选择器?

用于 Java 的 Javascript 解析器

javascript - 如何更新幻灯片数量(猫头鹰轮播)

javascript - 删除extjs复选框模型中的全选复选框