如何区分可选字段、必填无效字段和必填有效字段

Question

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

要求有白色背景的可选字段、带红色边框的黄色背景的必填无效字段和无红色边框的黄背景的必填有效字段。

在我的页面中，ng required是动态设置的。即使设置为false；angular添加了类"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，也需要angular使类ng有效。IsCategoryRequired=false。只有当ng required属性不存在时，ng valid required才不存在。

Answer 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' }"/>