Twitter Bootstrap sınıfı nasıl ayarlanır? AngularJS giriş sınıfına göre hata = ng-invalid?

Question

CSS cihazımın etkili olmayacağı bir sorunum var (Chrome'da) ve bence Twitter Bootstrap ile bir çakışma var.

input.ng-invalid { 
    border-color: red; 
    outline-color: red; 
} 

Benim desen olarak benim denetleyicisi tanımlanır:

$scope.hexPattern = /^[0-9A-Fa-f]+$/; 

Ve canlı DOM HTML kopyalama, çok ng-pattern çalışıyor olmalılar benim, ng-invalid ve ng-invalid-pattern hem ayarlandığını görüyoruz.

<div class="control-group"> 
    <label class="control-label" for="salt">Salt: </label> 
    <div class="controls"> 
     <input type="text" id="salt" ng-model="salt" ng-pattern="hexPattern" class="ng-dirty ng-invalid ng-invalid-pattern"> 
    </div> 
</div> 

ben "Doğrulama devletler" Twitter Bootstrap Bankası CSS Forms bölümünün bölüm, ben kontrol grubu div error sınıf eklemek gerekir bkz görüyoruz.

<div class="control-group error"> 

Soru: nasıl çocuk girişi class=ng-invalid dayalı class=error kurulur? Bu, ng sınıfı bir ifadenin yumuşaklığıyla yapılabilir mi? Bunu kontrol ünitesinde kod ile yapabilir miyim? Özellik değişiklikleri gibi desen değerlendirmesi ". $ Watch" için bir yolu var mı? "Kırmızı" çizgimi elde etmek için başka fikirler var mı?

Answer 1

Kolayca ng-class yönergesi ile yapabilirsiniz:

<form name="myForm"> 
    <div class="control-group" ng-class="{ error: myForm.salt.$invalid }"> 
    <label class="control-label" for="salt">Salt: </label> 
    <div class="controls"> 
     <input type="text" name="salt" ng-model="salt" ng-pattern="hexPattern"> 
    </div> 
    </div> 
</form> 

http://plnkr.co/edit/RihsxA?p=preview

DÜZENLEME

Örnek bootstrap 3.3.5 ve açısal 1.4.2 ile:

<form name="myForm"> 
    <div class="form-group" ng-class="{ 'has-error': myForm.salt.$invalid }"> 
    <label class="control-label" for="salt">Salt: </label> 
    <input class="form-control" type="text" name="salt" ng-model="salt" ng-pattern="hexPattern"> 
    </div> 
</form> 

http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=preview

Answer 2

Daha iyi bir çözüm kendi CSS kurallarınızı eklemeniz gerektiğini düşünüyorum. Kodu daha basit hale getirir ve bir bonus olarak kuralı yalnızca "kirli" elemanlara uygulanacak şekilde ayarlayabilirsiniz. Bu şekilde alanlar yalnızca kullanıcı bir şey girmeye çalıştıktan sonra vurgulanacaktır.

Uygulamamda bu css'yi ekledim, the AngularJS forms documentation'daki bir örneğe göre.

/* Forms */ 
.ng-invalid.ng-dirty { 
    border-color: red; 
    outline-color: red; 
} 
.ng-valid.ng-dirty { 
    border-color: green; 
    outline-color: green; 
}