入力が有効な場合、角トグルクラス

Question

入力が有効な場合は、入力時にcssクラスを切り替えようとしていますが、無効な場合は実行できますが、有効な場合は2つのクラスが必要です。

<form name="userForm" ng-submit="submitForm()" novalidate> 
    <input type="email" name="email" placeholder="E-mailadres" class="input-field" ng-model="user.email" required ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }" /> 
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> 
    <input type="password" name="password" ng-model="user.password" placeholder="Wachtwoord" class="input-field" required /> 
    <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">You name is required.</p> 
    <button type="submit" class="btn hit-btn" ng-disabled="userForm.$invalid">Log in</button> 
</form> 

あなたは、私はクラスがあり、エラーを持っていることに気づくでしょうが、私は必要があります：それは簡単で有効でない場合、それを作るために、しかし有効であるかどうかをどのように追加することで、ここに私のコードは、私が今のところ持っていますあなたが別のクラスが必要な場合は、クラスなしエラーが

Answer 1

これは動作していない

.has-error { 
 
    background: red; 
 
} 
 
.no-error { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app> 
 
    <form name="userForm" ng-submit="submitForm()" novalidate> 
 
    <input type="email" name="email" placeholder="E-mailadres" class="input-field" ng-model="user.email" required ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine,'no-error' :!userForm.email.$invalid }" /> 
 
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> 
 
    <input type="password" name="password" ng-model="user.password" placeholder="Wachtwoord" class="input-field" required /> 
 
    <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">You name is required.</p> 
 
    <button type="submit" class="btn hit-btn" ng-disabled="userForm.$invalid">Log in</button> 
 
    </form> 
 
</div>

Answer 2

、ちょうど逆の状態でそれを追加します。

<input type="email" name="email" placeholder="E-mailadres" 
    class="input-field" ng-model="user.email" required 
    ng-class="{ 
    'has-error' : userForm.email.$invalid && !userForm.email.$pristine, 
    'no-error' : !userForm.email.$invalid || userForm.email.$pristine 
    }" 
/> 

Answer 3

ng-class="{userForm.email.$invalid && !userForm.email.$pristine?'has-error':'no-error'}"