Uzyskiwanie pola formularza kątowego

Question

Mam formularz z niektórymi polami.
mam walidacji pól z klas CSS (jeśli pole jest nieważny, a użytkownik dotknął go, a następnie wejściowego border-color = red.)

select.ng-invalid.ng-touched, 
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched { 
    border-color: red; 
} 

Jeśli użytkownik przesyła formularz bez wypełnienia jednego lub więcej pola, wystąpiłby alarm niebezpieczeństwa.

HTML:

<div ng-show="formInvalid> 
     error! 
    </div> 

JS:

if ($scope.pniyaForm.$valid) { 
    $scope.formInvalid = false; 
     ..... 
} else { 
    $scope.formInvalid = true; 
} 

ale jeśli użytkownik przesyła formularz oraz nie dotknął żadnej z pola, klasy css nie zrobić wpływ (ponieważ użytkownik nie dotknął ...)
Chcę dodać klasę w kodzie.
Czy ktoś ma pomysł na elegancki sposób, aby to zrobić bez pisania go na każdym polu osobno?

Answer 1

Korzystanie walidacji ng klasy w angularjs

<div class="form-group"> 
    <label>Name</label> 
    <input type="text" required ng-model="name" name="name" ng-class="{'has-error': myForm.name.$invalid}" /> 
</div> 

<div class="form-group"> 
    <label>Age</label> 
    <input type="text" required ng-model="age" name="age" ng-class="{'has-error': myForm.age.$invalid}" /> 
</div> 

Answer 2

możliwe rozwiązanie:

kiedy realizują swoją funkcję formularz, dodaj następującą linię do niego.

$scope.$apply(function() {}); 

ten wiersz spowoduje, że ng $ scope. $ Watch() uruchomi i zastosuje zmiany, jeśli istnieją. może działać, może nie działać, przeczytaj poniższy link, aby lepiej zrozumieć problem.

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Answer 3

Jeśli użytkownik przesyła formularz oraz nie dotknął żadnej z pola, klasy css nie wpływają

Musisz podać początkową wartość określona na ngModel i przynajmniej podać atrybut required do danych wejściowych.

Zastosowanie ngClass warunkowo stosować klas css w przypadku niektórych części formularza są nieważne

<form name="myform"> 
    <div class="form-group" ng-class="{'has-error': myform.myinput.$invalid}"> 
     <input name="myinput" ng-model="myName" class="...." required> 
    </div> 
.... 
</form> 

.... 
// in controller 
$scope.myName = "cats"; // form is valid 
$scope.myName = "";  // form is invalid, and the css class 'has-error' will be applied 

Następnie użyj ngDisables w przycisk Prześlij, aby zapobiec złożenia w przypadku, gdy formularz jest nieprawidłowy

<button type="submit" ng-disabled="myform.$invalid">submit</button>