AngularJS
양식 검증

기본 양식 유효성 검사

Angular의 장점 중 하나는 클라이언트 측 폼 유효성 검사입니다.

전통적인 양식 입력을 처리하고 질의 (interrogative) jQuery 스타일 처리를 사용하는 것은 시간 소모적이고 까다 롭습니다. Angular를 사용하면 전문적인 대화 형 양식을 비교적 쉽게 만들 수 있습니다.

ng-model 지정 문은 입력 필드와 양방향 바인딩을 제공하며 일반적으로 novalidate 속성은 양식 요소에 배치되어 브라우저가 원시 유효성 검증을 수행하지 못하게합니다.

따라서, 간단한 폼은 다음과 같습니다.

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Angular가 입력의 유효성을 검사하려면 범위에서 바인딩 할 변수를 지정하기 위해 ng-model 속성을 추가하는 것을 제외하고는 일반 입력 요소와 똑같은 구문을 사용합니다. 전자 메일은 이전 예제에 나와 있습니다. 숫자의 유효성을 검사하는 구문은 다음과 같습니다.

<input type="number" name="postalcode" ng-model="zipcode" />

기본 양식 유효성 검사의 마지막 단계는 기본 양식 제출이 수행되는 것을 허용하는 대신 ng-submit을 사용하여 컨트롤러에서 양식 제출 기능에 연결하는 것입니다. 이것은 필수는 아니지만 입력 변수가 이미 범위에서 사용 가능하며 제출 기능에서 사용할 수 있으므로 일반적으로 사용됩니다. 또한 일반적으로 양식에 이름을 지정하는 것이 좋습니다. 이러한 변경으로 인해 다음과 같은 구문이 나타납니다.

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

위의 코드는 작동하지만 Angular가 제공하는 다른 기능이 있습니다.

다음 단계는 Angular가 폼 처리에 ng-pristine , ng-dirty , ng-valid 및 ng-invalid 를 사용하여 클래스 속성을 첨부한다는 것을 이해하는 것입니다. CSS에서 이러한 클래스를 사용하면 유효 / 무효 및 원시 / 더티 입력 필드의 스타일을 지정하고 사용자가 양식에 데이터를 입력 할 때 프레젠테이션을 변경할 수 있습니다.

양식 및 입력 상태

각도 양식 및 입력에는 내용 유효성을 검사 할 때 유용한 다양한 상태가 있습니다.

입력 상태

위의 모든 상태는 부울 속성이며 true 또는 false 일 수 있습니다.

이를 통해 사용자에게 메시지를 표시하는 것이 매우 쉽습니다.

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

여기서는 ng-show 지시문을 사용하여 양식을 수정했지만 유효하지 않은 경우 사용자에게 메시지를 표시합니다.

CSS 클래스

Angular는 양식 및 입력에 대한 상태에 따라 CSS 클래스를 제공합니다.

이 클래스를 사용하여 양식에 스타일을 추가 할 수 있습니다.

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages 는 유효성 검사 메시지를보기에 표시하기위한 스타일을 향상시키는 데 사용됩니다.

전통적 접근법

ngMessages 하기 전에 일반적으로 ng-class 사전 정의 된 지시문을 사용하여 유효성 검사 메시지를 표시합니다.이 접근법은 ngMessages repetitive 작업이었습니다.

이제 ngMessages 를 사용하여 자체적 인 맞춤 메시지를 만들 수 있습니다.

예

Html :

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS :

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

사용자 지정 양식 유효성 검사

어떤 경우에는 기본적인 검증만으로는 충분하지 않습니다. ngModelController 의 $validators 객체에 $validators 검사기 기능을 추가하는 각도 지원 맞춤 검사 :

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

유효성 검사기는 ngModel 을 필요로하는 지시문으로 정의되므로 유효성 검사기를 적용하려면 사용자 지정 문을 입력 양식 컨트롤에 추가하면됩니다.

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

그리고 my-validator 는 기본 폼 컨트롤에 적용 할 필요가 없습니다. 그것의 속성에 ng-model 이라면 어떤 요소라도 될 수 있습니다. 일부 사용자 정의 빌드 UI 구성 요소가있는 경우에 유용합니다.

중첩 된 양식

때로는 페이지에 컨트롤과 입력을 논리적으로 그룹화하기 위해 양식을 중첩하는 것이 바람직합니다. 그러나 HTML5 양식은 중첩되어서는 안됩니다. 각도 공급은 대신에 ng-form 합니다.

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

양식의 각 부분은 전체 양식의 상태에 영향을줍니다. 따라서 입력 중 하나 인 myInput1 이 편집되고 $dirty 이면 해당 포함 양식도 $dirty 됩니다. 이것은 각각의 폼을 포함하고 있기 때문에 myNestedForm 과 myForm 은 모두 $dirty 됩니다.

비동기 유효성 검사기

비동기 유효성 검사기를 사용하면 백엔드에 대한 양식 정보의 유효성을 검사 할 수 있습니다 ($ http 사용).

이러한 종류의 유효성 검사기는 사용자 테이블 및 기타 데이터베이스 정보와 같은 다양한 이유로 사용자 클라이언트에서 가질 수없는 서버 저장 정보에 액세스해야 할 때 필요합니다.

비동기 유효성 검사기를 사용하려면 input 의 ng-model 에 액세스하고 $asyncValidators 속성에 대한 콜백 함수를 정의합니다.

예:

다음 예제는 제공된 이름이 이미 존재하는지 확인하고, 이름이 이미 있거나 제공되지 않은 경우 약속을 거부하는 상태를 백엔드가 반환합니다. 이름이 존재하지 않으면 해결 된 약속이 반환됩니다.

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

이제 입력의 ng-model 이 변경 될 때마다이 함수가 실행되어 결과와 함께 약속을 반환합니다.