source

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

manysource 2023. 3. 31. 22:29

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

이 방법을 사용하고 있습니다.http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview은 흐릿한 필드만 검증합니다.이것은 정상적으로 동작합니다만, 유저가 「송신」버튼(실제 송신이 아니고, 함수에의 데이터 ng클릭 콜)을 클릭했을 때에, 그 필드의 에러를 표시해 주세요.

그 버튼을 클릭했을 때 모든 필드에서 검증을 다시 시작할 수 있는 방법이 있습니까?

나한테 효과가 있었던 건$setSubmitted이 함수는 버전 1.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.

명명된 폼이 있는 경우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의 각도 문서에서.$140:

등록된 각 검증자(먼저 동기 검증자, 다음으로 비동기 검증자)를 실행합니다.유효성이 무효로 변경되면 ngModelOptions가 아닌 한 모델은 정의되지 않음으로 설정됩니다.allowInvalid는 true입니다.유효성이 유효하게 변경되면 모델은 유효한 마지막 $modelValue(즉, 마지막으로 해석된 값 또는 스코프에서 설정된 마지막 값)로 설정됩니다.

따라서 모델 값이 하지 않은 를 들어, 모델 을 나타내는 를 띄우는 경우)에는 모델 값을 .allowInvalid로 설정되어 있다.true이치노

각도 검증자를 사용하여 원하는 작업을 수행할 수 있습니다.그것은 사용하기가 바보같다.

다음과 같이 됩니다.

  • 의 필드만 검증합니다.$dirty ★★★★★★★★★★★★★★★★★★.submit
  • 유효하지 않은 경우 양식 제출 금지
  • 가 " " "인 후 "$dirty 양식을 합니다.

데모 보기

예

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

가 ""를 "validator이치노

자세한 내용은 각도 검증기 사용 사례 및 예를 참조하십시오.

면책사항:나는 각도 검증기의 저자이다.

음, 각진 방법은 모델이 변경될 때마다 검증을 처리하고 사용자가 원할 때만 결과를 표시하는 것입니다.

이 경우 에러를 표시하는 타이밍을 결정합니다.이 경우 플래그를 설정하기만 하면 됩니다.http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview

제가 알기로는 우리가 보다 고도의 폼 제어를 할 수 있도록 각도로 제출된 문제가 있습니다.해결되지 않았기 때문에 기존의 모든 검증 방법을 재창조하는 대신 이것을 사용합니다.

edit: 하지만 만약 당신이 계속 원한다면, 여기 제출하기 전에 검증을 수정한 바이올린을 보내드리겠습니다.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');

버튼 클릭 시 검증 처리 시 이 방식이 마음에 듭니다.

  1. 컨트롤러에서 아무것도 호출할 필요가 없습니다.

  2. 모두 지시대로 처리됩니다.

기트허브에

다음과 같이 시험해 보십시오.

// 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%;
    }

필요할 때 폼의 모든 필드를 검증하려면 $$controls의 각 필드에 대해 다음과 같이 검증을 수행합니다.

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

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

'source' 카테고리의 다른 글

tailwindcss가 next.js와 함께 작동하지 않습니다.설정에 무슨 문제가 있습니까?  (0) 2023.03.31
JQuery AJAX를 통해 FormData와 문자열 데이터를 함께 전송하시겠습니까?  (0) 2023.03.31
Wordpress PHP에서 메타 태그를 사용하는 동적 페이스북  (0) 2023.03.31
Mongodb:사용하기 전에 알아야 할 사항  (0) 2023.03.26
컨트롤러에서 PreAuthorize가 작동하지 않음  (0) 2023.03.26

'source'의 다른글

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

관련글

댓글

티스토리툴바