您如何区分可选字段、必填无效字段和必填有效字段？答案

【问题标题】：How do you differentiate between optional field, required invalid field and required valid field?您如何区分可选字段、必填无效字段和必填有效字段？
【发布时间】：2016-08-02 16:39:04
【问题描述】：

Angular JS 中如何区分可选字段、必填无效字段和必填有效字段？

要求是可选字段为白色背景，无效字段为黄色背景，带红色边框，有效字段为黄色背景，不带红色边框。

在我的页面中，ng-required 是动态设置的。即使设置为false；角度添加类“ng-valid-required”。根本没有办法区分。任何帮助将不胜感激。

<select class="form-control" ng-model="vm.Category" ng-required="vm.IsCategoryRequired">
    <option ng-repeat="option in vm.CategoryOptions" value="{{option.id}}">{{option.label}}</option>
</select>`

CSS：

select.ng-required {
    background-color: #fdfddf;
}
select.ng-valid-required{
    background-color: #fdfddf;
}
select.ng-invalid {
    box-shadow: 0px 0px 4px 2px rgba(227,43,43,1);
    background-color: #fdfddf;
}

即使 vm.IsCategoryRequired = false，问题是 angular puts 类 ng-valid-required。 ng-valid-required 仅在 ng-required 属性不存在时不存在。

【问题讨论】：

您需要发布一些代码以便有人能够帮助您。

标签： javascript css angularjs validation

【解决方案1】：

由于您没有提供任何代码，我假设您的输入字段之一看起来像这样

<input ng-modal="myModal" ng-required="a===b" />

这里a===b是条件（比方说）

现在一种方法是在ng-style 中指定一个条件，像这样设置背景颜色和边框。

<input ng-modal="myModal" ng-required="a===b" 
       ng-style="a===b ? { 'background-color':'yellow', 'border': '1px solid red' } : { 'background-color':'yellow', 'border': '1px solid black' }"/>

【讨论】：