ng-class가 적용되지 않았습니다.

Question

AngularJS를 사용하여 양식의 유효성을 검사하려고합니다. 이것은 내 양식입니다.

<form ng-controller="LoginCtrl" role="form" class="form-horizontal"> 
    <div class="form-group"> 
     <label for="email" class="col-sm-2 control-label">Email</label> 
     <div class="col-sm-10"> 
      <input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: email.$invalid }" id="email"> 
     </div> 
    </div> 
</form> 

ng-class는 절대로 적용되지 않습니다. 나는 이메일을 시도했다. $ valid, email. $ invalid, email. $ error. 컨트롤러는 콘솔에 로깅하는 것 외에는 아무 것도하지 않으므로 호출됩니다. $scope.email = 'asd@asd.com'을 하드 코딩하면 올바르게 설정됩니다.

값이 없거나 유효하지 않은 문자열을 입력 할 때 ng-class가 적용되지 않는 이유는 무엇입니까?

Answer 1

당신은뿐만 아니라 양식 이름으로 한정해야합니다 :

<form ng-controller="LoginCtrl" name="emailForm" role="form" class="form-horizontal"> 
    <div class="form-group"> 
     <label for="email" class="col-sm-2 control-label">Email</label> 
     <div class="col-sm-10"> 
      <input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: emailForm.email.$invalid }" id="email"> 
     </div> 
    </div> 
</form> 

각도가 <form>에 대한 자신의 지침을 가지고 있으며, 따라서 양식을 볼 경우,이 이름은 현재 범위에 개체를 추가해야합니다 것을 이해 똑같다. 이 경우 emailForm. 컨트롤러에서 email 필드를 $scope.emailForm.email으로 지정합니다. , 특별히 required를 찾고 있습니다

때문에 당신은이를 사용할 수 있습니다

ng-class="{ error: emailForm.email.$error.required }"