Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

program story

Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

inputbox 2020. 10. 10. 10:02

Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

이 방법을 사용하고 있습니다 : http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview 는 흐림에 대한 필드 만 확인합니다. 이것은 잘 작동하지만 사용자가 '제출'버튼 (실제 제출이 아니라 함수에 대한 data-ng-click 호출)을 클릭 할 때 유효성을 검사하여 해당 필드에 대한 오류를 표시하고 싶습니다.

해당 버튼을 클릭 할 때 모든 필드에 대한 유효성 검사를 다시 트리거하는 방법이 있습니까?

나를 위해 일한 것은 $setSubmitted1.3.20 버전의 앵귤러 문서에 처음 나타나는 함수를 사용하는 것입니다.

유효성 검사를 트리거하려는 클릭 이벤트에서 다음을 수행했습니다.

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

그게 전부였습니다. 문서에 따르면 "양식을 제출 된 상태로 설정합니다." 여기에 언급되어 있습니다 .

대답하기에는 너무 늦었지만, 모든 양식을 더럽 히기 만하면됩니다. 다음 스 니펫을 살펴보십시오.

angular.forEach($scope.myForm.$error.required, function(field) {
    field.$setDirty();
});

그런 다음 다음을 사용하여 양식이 유효한지 확인할 수 있습니다.

if($scope.myForm.$valid) {
    //Do something
}

마지막으로 모든 것이 좋아 보인다면 경로를 변경하고 싶을 것입니다.

$location.path('/somePath');

편집 : 제출 이벤트가 트리거 될 때까지 양식이 범위에 등록되지 않습니다. ng-submit 지시문을 사용하여 함수를 호출하고 위의 함수를 해당 함수에 래핑하면 작동합니다.

누군가가 나중에 이것에 다시 올 경우 ... 위의 어느 것도 나를 위해 일하지 않았습니다. 그래서 각도 형식 유효성 검사의 핵심을 파헤 치고 주어진 필드에서 유효성 검사기를 실행하기 위해 호출하는 함수를 찾았습니다. 이 속성은 편리하게 호출 $validate됩니다.

명명 된 form이있는 경우 myForm프로그래밍 방식으로 호출 myForm.my_field.$validate()하여 필드 유효성 검사를 실행할 수 있습니다 . 예를 들면 :

<div ng-form name="myForm">
    <input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>

호출 $validate은 모델에 영향을 미칩니다. ngModelCtrl. $ validate에 대한 각도 문서에서 :

등록 된 각 유효성 검사기를 실행합니다 (첫 번째 동기 유효성 검사기 다음 비동기 유효성 검사기). 유효성이 유효하지 않은 것으로 변경되면 ngModelOptions.allowInvalid가 true가 아닌 한 모델이 정의되지 않음으로 설정됩니다. 유효성이 valid로 변경되면 모델이 마지막으로 사용 가능한 유효한 $ modelValue, 즉 마지막으로 구문 분석 된 값 또는 범위에서 설정된 마지막 값으로 설정됩니다.

따라서 유효하지 않은 모델 값으로 무언가를 할 계획이라면 (예 : 그렇게 알리는 메시지를 띄우는 것과 같이) 모델 allowInvalid에 true대해 로 설정되어 있는지 확인해야합니다 .

Angular-Validator 를 사용 하여 원하는 작업을 수행 할 수 있습니다. 사용하기는 어리석은 일입니다.

그것은 :

필드의 유효성을 검사합니다 $dirty.submit
유효하지 않은 경우 양식 제출 방지
필드가 $dirty있거나 양식이 제출 된 후 사용자 지정 오류 메시지 표시

데모보기

예

<form angular-validator 
       angular-validator-submit="myFunction(myBeautifulForm)"
       name="myBeautifulForm">
       <!-- form fields here -->
    <button type="submit">Submit</button>
</form>

필드가 통과하지 않으면 validator사용자는 양식을 제출할 수 없습니다.

확인 각도 - 검증의 사용 사례 및 예제를 자세한 내용은.

면책 조항 : 저는 Angular-Validator의 저자입니다.

글쎄, 각진 방법은 유효성 검사를 처리하도록하는 것입니다.-모든 모델 변경에서 수행하기 때문에-원하는 경우에만 결과를 사용자에게 보여줍니다.

이 경우 오류를 표시 할시 기를 결정하고 플래그를 설정하기 만하면됩니다. http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview

내가 아는 한 더 고급 양식 제어를 할 수 있도록 각도에 문제가 있습니다. 해결되지 않았기 때문에 기존의 모든 유효성 검사 방법을 재발 명하는 대신 이것을 사용합니다.

편집 : 그러나 당신이 당신의 길을 주장한다면, 여기에 제출하기 전에 유효성 검사가있는 수정 된 바이올린이 있습니다. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview 컨트롤러는 버튼을 클릭 할 때 이벤트를 브로드 캐스트하고 지시문은 유효성 검사 마법을 수행합니다.

한 가지 접근 방식은 모든 속성을 더티하게 만드는 것입니다. 각 컨트롤러에서 할 수 있지만 매우 지저분합니다. 일반적인 해결책이있는 것이 좋습니다.

제가 생각할 수있는 가장 쉬운 방법은

양식 제출 속성을 처리합니다.
모든 양식 필드를 반복하고 원시 필드를 더럽게 표시합니다.
제출 함수를 호출하기 전에 양식이 유효한지 확인합니다.

다음은 지침입니다.

myModule.directive('submit', function() {
  return {
    restrict: 'A',
    link: function(scope, formElement, attrs) {
      var form;
      form = scope[attrs.name];
      return formElement.bind('submit', function() {
        angular.forEach(form, function(field, name) {
          if (typeof name === 'string' && !name.match('^[\$]')) {
            if (field.$pristine) {
              return field.$setViewValue(field.$value);
            }
          }
        });
        if (form.$valid) {
          return scope.$apply(attrs.submit);
        }
      });
    }
  };
});

다음과 같이 양식 html을 업데이트하십시오.

 <form ng-submit='justDoIt()'>

된다 :

 <form name='myForm' novalidate submit='justDoIt()'>

여기에서 전체 예를 참조하십시오. http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview

다음은 양식 오류 메시지를 표시하는 전역 함수입니다.

 function show_validation_erros(form_error_object) {
        angular.forEach(form_error_object, function (objArrayFields, errorName) {
            angular.forEach(objArrayFields, function (objArrayField, key) {
                objArrayField.$setDirty();
            });
        });
    };

그리고 내 모든 컨트롤러에서

if ($scope.form_add_sale.$invalid) { 
    $scope.global.show_validation_erros($scope.form_add_sale.$error);
}

Thilak의 답변을 바탕으로이 솔루션을 생각 해낼 수있었습니다.

내 양식 필드는 필드가 유효하지 않고 사용자가 터치 한 경우에만 유효성 검사 메시지를 표시하므로 버튼으로 트리거 된이 코드를 사용하여 유효하지 않은 필드를 표시 할 수있었습니다.

// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
  angular.forEach(error, function(field) {
    field.$setTouched();
  });
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
  isValid = false;
}

<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">

  <!-- field label -->
  <label class="control-label">Suffix</label>
  <!-- end field label -->
  <!-- field input -->
  <select name="Parent_Suffix__c" class="form-control"
          ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
          ng-model="rfi.contact.Parent_Suffix__c" />
  <!-- end field input -->
  <!-- field help -->
  <span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
    <span ng-message="required">this field is required</span>
  </span>  
  <!-- end field help -->
</div>
<!-- end form field -->

참고 : 이것이 해킹이라는 것을 알고 있지만 간단한 메커니즘을 제공하지 않은 Angular 1.2 및 이전 버전에서는 유용했습니다.

유효성 검사는 변경 이벤트에서 시작되므로 프로그래밍 방식으로 값을 변경하는 것과 같은 일부 항목은이를 트리거하지 않습니다. 그러나 변경 이벤트를 트리거하면 유효성 검사가 트리거됩니다. 예를 들어, jQuery를 사용하는 경우 :

$('#formField1, #formField2').trigger('change');

내가 원할 때 양식의 모든 필드의 유효성을 검사하기 위해 다음과 같이 $$ controls의 각 필드에 대한 유효성 검사를 수행합니다.

angular.forEach($scope.myform.$$controls, function (field) {
    field.$validate();
});

버튼 클릭시 유효성 검사를 처리 할 때이 방식이 마음 에 듭니다.

컨트롤러에서 아무것도 호출 할 필요가 없습니다.
모두 지시문으로 처리됩니다.

에 github에

이것을 시도 할 수 있습니다.

// The controller

$scope.submitForm = function(form){
   		//Force the field validation
   		angular.forEach(form, function(obj){
   			if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
   			{ 
   				obj.$setDirty();
   			}
   		})
        
        if (form.$valid){
		
			$scope.myResource.$save(function(data){
		     	//....
			});
		}
}

<!-- FORM -->

  <form name="myForm"  role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }">
      <label for="field1">My field 1</label>
        <span class="nullable"> 
        <select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall"
          class="form-control input-sm" required>
            <option value="">Select One</option>
        </select>
        </span>
        <div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
  </div>
    
<!-- FORM GROUP to field 2 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }">
    <label class="control-label labelsmall" for="field2">field2</label> 
      <input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number" 
      class="form-control input-sm" required>
    <div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
  </div>

  </form>

<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>

나는 그것을 작동시키기 위해 다음과 같은 일을했다.

<form name="form" name="plantRegistrationForm">
  <div ng-class="{ 'has-error': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }">
    <div class="col-md-3">
      <div class="label-color">HEADER NAME 
        <span class="red"><strong>*</strong></span></div>
    </div>
    <div class="col-md-9">
      <input type="text" name="headerName" id="headerName" 
             ng-model="header.headerName" 
             maxlength="100" 
             class="form-control" required>
      <div ng-show="form.$submitted || form.headerName.$touched">
        <span ng-show="form.headerName.$invalid" 
              class="label-color validation-message">Header Name is required</span>
      </div>
    </div>
  </div>

  <button ng-click="addHeader(form, header)" 
          type="button" 
          class="btn btn-default pull-right">Add Header
  </button>

</form>

컨트롤러에서 할 수 있습니다.

addHeader(form, header){
        let self = this;
        form.$submitted = true;
        ... 
    }

CSS도 필요합니다.

.label-color {
            color: $gray-color;
        }
.has-error {
       .label-color {
            color: rgb(221, 25, 29);
        }
        .select2-choice.ui-select-match.select2-default {
            border-color: #e84e40;
        }
    }
.validation-message {
       font-size: 0.875em;
    }
    .max-width {
        width: 100%;
        min-width: 100%;
    }

참고 URL : https://stackoverflow.com/questions/16939981/trigger-validation-of-all-fields-in-angular-form-submit

'program story' 카테고리의 다른 글

C에 권장되는 gcc 경고 옵션 (0)	2020.10.10
Git에서 무시 된 디렉터리의 하위 디렉터리 무시 (0)	2020.10.10
두 개의 RMarkdown (.Rmd) 파일을 단일 출력으로 결합하는 방법은 무엇입니까? (0)	2020.10.10
UICollectionView, 전체 너비 셀, 자동 레이아웃 동적 높이 허용? (0)	2020.10.10
Subversion 저장소를 내보내고 가져 오려면 어떻게해야합니까? (0)	2020.10.10

현재글Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

inputbox

Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

'program story' 카테고리의 다른 글

'program story'의 다른글

티스토리툴바

Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

Angular Form 제출의 모든 필드에 대한 유효성 검사 트리거

'program story' 카테고리의 다른 글

'program story'의 다른글

관련글

티스토리툴바