如何區分可選字段，必填無效字段和必填有效字段？

Question

如何區分可選字段，所需的無效字段和Angular JS中所需的有效字段？

要求是在白色背景中有可選字段，在紅色邊框的黃色背景中需要無效字段，在黃色背景下沒有紅色邊框的所需有效字段。

在我的頁面中，ng-required是動態設置的。即使它被設置爲假;角度添加「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; 
} 

問題是角放類NG-有效-需要即使vm.IsCategoryRequired =假。 僅當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' }"/>