Wie unterscheiden Sie zwischen dem optionalen Feld, dem erforderlichen ungültigen Feld und dem erforderlichen gültigen Feld?

Question

Wie unterscheiden Sie zwischen dem optionalen Feld, dem erforderlichen ungültigen Feld und dem erforderlichen gültigen Feld in Angular JS?

Die Anforderung besteht darin, optionale Felder in einem weißen Hintergrund zu haben, ungültige Felder in gelbem Hintergrund mit rotem Rand und erforderliche gültige Felder in gelbem Hintergrund OHNE roten Rand erforderlich.

In meiner Seite wird ng-required dynamisch eingestellt. Auch wenn es auf false gesetzt ist; angular fügt die Klasse "ng-valid-required" hinzu. Es gibt einfach keine Möglichkeit zu unterscheiden. Jede Hilfe wird sehr geschätzt.

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

Das Problem ist, Winkel puts Klasse ng-valid-erforderlich, auch wenn vm.IsCategoryRequired = false. ng-valid-required fehlt nur, wenn ng-required-Attribut nicht vorhanden ist.

Answer 1

Da Sie keinen Code zur Verfügung gestellt haben, ich gehe davon aus, dass einer Ihrer Eingabefeld wie dieses

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

hier aussehen würde a===b ist die Bedingung (sagen wir mal)

nun einen Weg, ist eine Bedingung in ng-style wie folgt festzulegen, die die Hintergrundfarbe und den Rahmen festlegen wird.

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