제출 또는 사용자 입력시에만 양식 필드 유효성 검사

제출 또는 사용자 입력시에만 양식 필드 유효성 검사

---

을 사용하여 유효성을 검사 한 양식 필드가 있습니다 required. 문제는 양식이 렌더링 될 때 오류가 즉시 표시된다는 것입니다. 사용자가 실제로 텍스트 필드에 입력 한 후 또는 제출시에만 표시되기를 원합니다.

어떻게 구현할 수 있습니까?

---

$dirty사용자가 입력과 상호 작용 한 후에 만 ​​오류를 표시 하려면 플래그를 사용하십시오 .

<div>
  <input type="email" name="email" ng-model="user.email" required />
  <span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span>
</div>

사용자가 양식을 제출 한 후에 만 ​​오류를 트리거하려면 다음과 같이 별도의 플래그 변수를 사용할 수 있습니다.

<form ng-submit="submit()" name="form" ng-controller="MyCtrl">
  <div>
    <input type="email" name="email" ng-model="user.email" required />
    <span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">
      Email is required
    </span>
  </div>

  <div>
    <button type="submit">Submit</button>
  </div>
</form>

function MyCtrl($scope){
  $scope.submit = function(){
    // Set the 'submitted' flag to true
    $scope.submitted = true;
    // Send the form to server
    // $http.post ...
  } 
};

그런 다음 ng-show표현식 내부의 모든 JS 가 너무 많이 보이면 별도의 메서드로 추상화 할 수 있습니다.

function MyCtrl($scope){
  $scope.submit = function(){
    // Set the 'submitted' flag to true
    $scope.submitted = true;
    // Send the form to server
    // $http.post ...
  }

  $scope.hasError = function(field, validation){
    if(validation){
      return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]);
    }
    return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid);
  };

};

<form ng-submit="submit()" name="form">
  <div>
    <input type="email" name="email" ng-model="user.email" required />
    <span ng-show="hasError('email', 'required')">required</span>
  </div>

  <div>
    <button type="submit">Submit</button>
  </div>
</form>

---

양식 제출시 오류 메시지를 표시하려면 condition form.$submitted을 사용하여 양식 제출을 시도했는지 확인할 수 있습니다 . 다음 예를 확인하십시오.

<form name="myForm" novalidate ng-submit="myForm.$valid && createUser()">
  <input type="text" name="name" ng-model="user.name" placeholder="Enter name of user" required>
  <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
    <div ng-message="required">Please enter user name.</div>
  </div>

  <input type="text" name="address" ng-model="user.address" placeholder="Enter Address" required ng-maxlength="30">
  <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
    <div ng-message="required">Please enter user address.</div>
    <div ng-message="maxlength">Should be less than 30 chars</div>
  </div>

  <button type="submit">
    Create user
  </button>
</form>

---

angularjs 양식 상태를 사용할 수 있습니다 form.$submitted. 초기 form.$submitted값은 것 false과 의지가되었다 true성공적으로 양식을 제출 한 후.

---

에릭 아이그너,

$ dirty (필드가 수정 됨) 및 $ invalid (필드 내용이 유효하지 않음)를 사용하십시오.

각도 양식 유효성 검사에 대한 아래 예를 확인하십시오.

1)

사용자 입력 입력에 대한 유효성 검사 예제 HTML :

<form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate>
  <p>Email:<br>
    <input type="email" name="email" ng-model="email" required>
    <span ng-show="myForm.email.$dirty && myForm.email.$invalid">
      <span ng-show="myForm.email.$error.required">Email is required.</span>
      <span ng-show="myForm.email.$error.email">Invalid email address.</span>
      </span>
  </p>
    </form>

2)

사용자 제출에 대한 확인 예제 HTML / J :

      <form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation="">
      <p>Email:<br>
        <input type="email" name="email" ng-model="email" required>
        <span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
          <span ng-show="myForm.email.$error.required">Email is required.</span>
          <span ng-show="myForm.email.$error.email">Invalid email address.</span>
          </span>
      </p>
<p>
  <input type="submit">
</p>
</form>

사용자 지정 지시문 :

app.directive('formSubmitValidation', function () {

        return {
            require: 'form',
            compile: function (tElem, tAttr) {

                tElem.data('augmented', true);

                return function (scope, elem, attr, form) {
                    elem.on('submit', function ($event) {
                        scope.$broadcast('form:submit', form);

                        if (!form.$valid) {
                            $event.preventDefault();
                        }
                        scope.$apply(function () {
                            scope.submitted = true;
                        });


                    });
                }
            }
        };


  })

삼)

아래와 같이 ng-change 기능을 사용하고 싶지 않습니다.

  <form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate ng-change="submitFun()">
      <p>Email:<br>
        <input type="email" name="email" ng-model="email" required>
        <span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
          <span ng-show="myForm.email.$error.required">Email is required.</span>
          <span ng-show="myForm.email.$error.email">Invalid email address.</span>
          </span>
      </p>
<p>
  <input type="submit">
</p>
</form>

컨트롤러 SubmitFun () JS :

 var app = angular.module('example', []);
 app.controller('exampleCntl', function($scope) {
 $scope.submitFun = function($event) {
 $scope.submitted = true;
  if (!$scope.myForm.$valid) 
  {
        $event.preventDefault();
   }
  }

});

---

양식 요소에 대한 유효성 검사 호출은이 요소에 대한 변경 이벤트를 트리거하여 처리 할 수 ​​있습니다.

a) 예 : 양식에서 분리 된 요소에 대한 변경 트리거

$scope.formName.elementName.$$element.change();

b) 예 : ng-submit, ng-click, ng-blur 등의 각 양식 요소에 대한 변경 이벤트 트리거 ...

vm.triggerChangeForFormElements = function() {
    // trigger change event for each of form elements
    angular.forEach($scope.formName, function (element, name) {
        if (!name.startsWith('$')) {
            element.$$element.change();
        }
    });
};

c) 그리고 그것에 대한 또 다른 방법

    var handdleChange = function(form){
        var formFields = angular.element(form)[0].$$controls;
        angular.forEach(formFields, function(field){
            field.$$element.change();
        });
    };

ReferenceURL : https://stackoverflow.com/questions/17452247/validate-form-field-only-on-submit-or-user-input