AngularJS | 지침을 사용하여 클래스 추가/제거

Question

입력이 유효하거나 유효하지 않은 경우 AngularJS를 처음 사용하고 폼 요소에서 클래스를 전환하는 방법에 대한 도움말이 필요합니다.

내가 가장 검증이 DOM 내에서 수행되는 것을주의했다 - 여기 참조 : https://scotch.io/tutorials/angularjs-form-validation

을하지만, 내가 확인을 처리하기 위해 DOM을 사용하지 꿔. 유효성 검사 규칙에 따라 입력이 유효하거나 유효하지 않은 경우 사용자 지정 지정 문을 사용하여 처리하려고합니다. - FIELDSET에 클래스를 추가

다음

<fieldset ng-class="{error: loginForm.username.$invalid}"> 
      <div class="form-input-error" ng-show="loginForm.$error"> 
       Username is too short. 
      </div> 
      <div class="vfnz-fieldWrapper"> 
       <input 
        type="text" 
        id="username" 
        ng-model="username" 
        class="vfnz-input--text" 
        placeholder="Username" 
        ng-minlength="3" 
        ng-maxlength="8" /> 
       <label for="name" class="vfnz-input-label"> 
        Username 
       </label> 
      </div> 
     </fieldset> 

지금까지

A 입력이 유효 기본적 때 내 코드의 JSFIDDLE입니다 : 여기

지금까지 내 HTML/각도 마크 업입니다. 입력이 유효한 경우 클래스를 fieldset에 추가하십시오.

Answer 1

앵글 1.3.x에서 그들은 ng-messages가 떠올랐다. 나는 이것을 시도해야한다고 생각한다. 사용법의 장점은 입력에 여러 개의 오류가 포함 된 경우 적절한 오류가 표시된다는 것입니다. 유효성 검사 div에 클래스를 추가하십시오.

아래의 예에서는 필수 및 숫자를 확인합니다.

     <form name='cliForm'> 
         <input ng-model="vm.formData.newCreditLimit" type="text" name="changeCreditLimit" ng-pattern="/^[0-9]{1,15}$/" required /> 
         <div class="highlight" ng-messages="cliForm.changeCreditLimit.$error" ng-if="cliForm.$submitted"> 
          <div ng-message="required">* This field is required!</div> 
          <div ng-message="pattern">* Not a valid number!</div> 
         </div> 
        </form> 

(이는 다른 모듈 때문에 NG-메시지 스크립트를 포함하고

Answer 2

나는 또한이 문제에 대한 해결책을 찾고 있어요 당신의 각 모듈에 NG-메시지를 주입 사용하지만, 전에 lazy) Answer 지금 당장 선택하는 것은 일부 지시어가 요소가 유효한지 유효하지 않은지를 결정하고, 각도를 css 클래스로 처리하도록하는 것입니다. 내가하고있는 일은 ff를 내 CSS 파일에 추가하는 것입니다.

.ng-invalid { 
    border-color: #e51c23; 
    color: #e51c23 !important; 
} 

.ng-error { 
    border-color: #e51c23; 
    color: #e51c23 !important; 
} 

.ng-valid { 
    border-color: #4CAF50; 
    color: #4CAF50 !important; 
}