programing

각을 사용하여 중첩된 양식 유효성 검사 건너뛰기JS

instargram 2023. 2. 21. 23:23
반응형

각을 사용하여 중첩된 양식 유효성 검사 건너뛰기JS

AngularJS를 사용하여 중첩된 형식의 검증을 건너뛰려면 어떻게 해야 합니까?자녀양식이 무효인 경우에도 외부양식을 유효하게 해야 합니다.

(outer outer outer outerouter 형식은outer로 되어 있습니다.fOuter.$valid참말기본적으로는 그렇지 않습니다.른른른른 른른른?

코드(jsFiddle):

<div ng-app ng-controller="Ctrl">  
    <ng-form name="fOuter">  
        <h3>Outer form (valid={{fOuter.$valid}})</h3>  
        <input type="text" name="txtOuter" ng-model="outer" placeholder="(required)" required />  
        <ng-form name="fInner">  
            <h3>Inner form (valid={{fInner.$valid}})</h3>  
            <input type="text" name="txtInner" ng-model="inner" placeholder="(required)" required />  
        </ng-form>  
    </ng-form>  
</div>

여기 mbernath에서 영감을 얻은 해결책이 있습니다. 형태 자체를 아버지로부터 완전히 분리하는 것입니다.

이 솔루션은 다음 사항을 처리합니다.

  • 양식 유효($유효, $유효하지 않음)
  • 폼 인터랙션($pris틴, $dirty)
  • 내포된 양식 유효성 및 상호 작용

이 JSFiddle에서 동작하고 있는 것을 확인해 주세요.

angular.module('isolateForm',[]).directive('isolateForm', [function () {
    return {
        restrict: 'A',
        require: '?form',
        link: function (scope, elm, attrs, ctrl) {
            if (!ctrl) {
                return;
            }

            // Do a copy of the controller
            var ctrlCopy = {};
            angular.copy(ctrl, ctrlCopy);

            // Get the parent of the form
            var parent = elm.parent().controller('form');
            // Remove parent link to the controller
            parent.$removeControl(ctrl);

            // Replace form controller with a "isolated form"
            var isolatedFormCtrl = {
                $setValidity: function (validationToken, isValid, control) {
                    ctrlCopy.$setValidity(validationToken, isValid, control);
                    parent.$setValidity(validationToken, true, ctrl);
                },
                $setDirty: function () {
                    elm.removeClass('ng-pristine').addClass('ng-dirty');
                    ctrl.$dirty = true;
                    ctrl.$pristine = false;
                },
            };
            angular.extend(ctrl, isolatedFormCtrl);
        }
    };
}]);

이 명령어를 사용하려면 , 「isolate-form」이라고 부릅니다.

<form name="parent">
    <input type="text" ng-model="outside"/>
    <ng-form name="subform" isolate-form>
        <input type="text" ng-model="inside"/>
    </ng-form>
</form>

저도 같은 문제에 직면했어요.더 큰 폼 안에는 부모 폼의 상태를 건드리지 않는 여러 컨트롤이 있는 보조 폼이 필요했습니다.

제 해결책은 다음과 같습니다.부모 양식에서 보조양식을 제거하고 부모 양식에서 상태 변경을 보내지 않는 지시문 "null-form"을 작성했습니다.

angular.module('nullForm',[]).directive('nullForm', [function () {
  return {
    restrict: 'A',
    require: '?form',
    link: function link(scope, element, iAttrs, formController) {

      if (! formController) {
        return;
      }

      // Remove this form from parent controller
      var parentFormController = element.parent().controller('form');
      parentFormController.$removeControl(formController);

      // Replace form controller with a "null-controller"
      var nullFormCtrl = {
        $addControl: angular.noop,
        $removeControl: angular.noop,
        $setValidity: angular.noop,
        $setDirty: angular.noop,
        $setPristine: angular.noop
      };

      angular.extend(formController, nullFormCtrl);
    }
  };
}]);

그런 다음 다음과 같이 사용할 수 있습니다.

<form name="parent">
  <input type="text" ng-model="outside"/>
  <ng-form name="subform" null-form>
    <input type="text" ng-model="inside"/>
  </ng-form>
</form>

「내부」의 변경이나 네거티브 검증은, 「부모」에 영향을 주지 않습니다.

그러나 이 해결책으로 인해 단점이 하나 있습니다. 보조양식은 어떠한 상태도 가지지 않으며 ng-invalid 등의 CSS 클래스도 작동하지 않습니다.이를 수행하려면 원래 폼컨트롤러에서 이 기능을 다시 구현해야 합니다.

Angular 1.에서는 Angular 1.5를 사용하여 합니다.$removeControl:

module.directive('isolateForm', function() {
  return {
    restrict: 'A',
    require: '?form',
    link: function(scope, element, attrs, formController) {
      if (!formController) {
        return;
      }

      var parentForm = formController.$$parentForm; // Note this uses private API
      if (!parentForm) {
        return;
      }

      // Remove this form from parent controller
      parentForm.$removeControl(formController);
    }
  };
});

부모의 voila, preshent 및 validity 상태는 더 이상 중첩된 형식의 영향을 받지 않습니다.

가장 효과가 있는 해결책은 안톤의 해결책이라는 걸 알아냈어요

mbernath가 제안하는nullFormCtrl을 설정하면 자양식의 검증이 비활성화됩니다(단, 길을 닦기 위한 x).

변경한 것은 parent Form에 액세스하는 방법뿐입니다.angular는 그것을 위한 방법을 제공합니다.

.directive('isolateForm', [function () {
    return {
        restrict: 'A',
        require: '?form',
        link: function link(scope, element, iAttrs, formController) {

            if (!formController) {
                return;
            }

            // Remove this form from parent controller
            formController.$$parentForm.$removeControl(formController)

            var _handler = formController.$setValidity;
            formController.$setValidity = function (validationErrorKey, isValid, cntrl) {
                _handler(validationErrorKey, isValid, cntrl);
                formController.$$parentForm.$setValidity(validationErrorKey, true, this);
            }
        }
    };
}]);

각도 형태에서는 중첩될 수 있습니다.즉, 외부 양식은 모든 자식 양식이 유효한 경우에도 유효합니다.

외부 할수은 없습니다.$valid( ) 「 」 。

써보세요.error.required

   <h3>Outer form (valid={{!fOuter.txtOuter.$error.required}})</h3>

데모

Angular ngForm 문서에서:

다른 방법은 다음과 같은 컨트롤러를 사용하는 것입니다.

<h3>Outer form (valid={{isOuterFormValid}})</h3>

컨트롤러

$scope.isOuterFormValid = true;

// here, add listener on each input and change flag `isOuterFormValid`
...

저는 Angular는 처음이지만, 아래의 접근법이 도움이 되는지 확인해 주세요.

<div ng-app ng-controller="Ctrl"> <ng-form name="fOuter"> <h3>Outer form (valid={{fOuter.$valid}})</h3> <ng-form name="fInner1"> <h3>Inner form 1 (valid={{fInner1.$valid}})</h3> <input type="text" name="txtInner1" ng-model="outer" placeholder="(required)" required /> </ng-form> <ng-form name="fInner2"> <h3>Inner form 2 (valid={{fInner2.$valid}})</h3> <input type="text" name="txtInner2" ng-model="inner" placeholder="(required)" required /> </ng-form> </ng-form> </div>

동일한 문제가 발생하여 angular.js 파일 자체의 로컬 복사 비트 변경으로 해결했습니다.

기본적으로 Form Controller에 다음과 같이 새로운 기능을 추가하였습니다.

form.$resetParent = function() {
    parentForm = nullFormCtrl;
};

커스텀 디렉티브를 작성합니다.

angular.module('myApp').directive('dtIsolatedForm', function () {
    return {
        restrict: 'A',
        require: '?form',
        link: function (scope, element, attrs, formController) {
            if (!formController || !formController.$parentForm) {
                return;
            }

            formController.$resetParent();
        }
    };
});

또한 mbernath에서 영감을 얻어 더 간단한 해결책을 찾았습니다.이 명령어는 분리를 위해서만 더미 폼과 같은 명령어를 작성하는 것으로 구성됩니다.지시문은 중첩된 요소에서 외부 형식으로 전파되는 것을 중지하지만 형식 기능은 없습니다.ngForms를 내부에 중첩하여 완전히 작동시킬 수 있습니다.

angular.directive('formIsolator', function () {

            return {
                name: 'form',
                restrict: 'EAC',
                controller: function() {
                    this.$addControl = angular.noop;
                    this.$$renameControl = function(control, name) {
                        control.$name = name;
                    };
                    this.$removeControl = angular.noop;
                    this.$setValidity = angular.noop;
                    this.$setDirty = angular.noop;
                    this.$setPristine = angular.noop;
                    this.$setSubmitted = angular.noop;
                }
            };
        })

입니다( 「컨트롤러명」).name: 'form'이 속성은 문서화되어 있지 않지만 각도 소스에서 ngForm 디렉티브를 작성하기 위해 사용됩니다.

나는 mbernath의 단점 없는 버전을 제안하고 싶다.

angular.module('yourModule').directive('isolatedForm', [function () {
return {
    restrict: 'A',
    require: '?form',
    link: function link(scope, element, iAttrs, formController) {

        if (!formController) return;

        // Remove this form from parent controller
        var parentFormController = element.parent().controller('form');
        parentFormController.$removeControl(formController);
        // override default behavior
        var _handler = formController.$setValidity;
        formController.$setValidity = function (validationErrorKey, isValid, cntrl) {
            _handler(validationErrorKey, isValid, cntrl);
            parentFormController.$setValidity(validationErrorKey, true, this);
        }
    }
};}]);

컨트롤러에서:

Ctrl.isOuterFormValid = function() {
    var outerFormIsValid = true;
    for(var prop in Ctrl.formName) {
        //The form is only inValid if the property is not a new form and it is invalid
        if(pvCtrl.pvForm[prop].constructor.name !== "FormController" &&
           pvCtrl.pvForm[prop].$invalid){
            outerFormIsValid = false;
        }
    }

    alert(outerFormIsValid);
};

FormController는 양식 상태에 대한 정보를 제공하는 개체입니다.
폼 추가, 폼 추가, 폼 추가ng-form를 붙이는 예요.FormControllerFormController★★★★★★ 。

이것은 모든 입력 요소에 html 지시어를 추가하지 않는다는 장점이 있습니다.

간의 하여 자신의 입니다.$error형식의 오브젝트를 개별적으로 표시합니다.이를 위해서는 2개의 중첩된 형식 사이에 modelController를 도입하여 해당 modelController가 부모폼컨트롤러와 자녀폼컨트롤러의 유효/비활성화 시기를 결정할 수 있도록 합니다. , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 를 크게 .$setValidity()폼이 유효 또는 무효가 되는 타이밍을 결정합니다.

아래 플런커 링크에서 제 코드를 찾아주세요.부모 폼과 자녀 폼 사이에 모델 컨트롤러를 도입했습니다., 그럼 이렇게 .$error★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★을 알 수model Controller の contcont 。이 논리는 우리의 요구에 따라 수정되거나 확장될 수 있습니다.코드에 대해 더 명확하게 할 필요가 있는 사람이 있으면 알려주세요.

[plnkr]: https://plnkr.co/edit/5gvctSSqmWiEAUE3YUcZ?p=preview

폼이 유효한지 확인하기 전에 네스트된 폼을 삭제하기만 하면 됩니다. vm.parentForm.$removeControl(vm.nestledForm);

언급URL : https://stackoverflow.com/questions/19333544/skip-nested-forms-validation-with-angularjs

반응형

'programing' 카테고리의 다른 글

jquery에서 외부 URL을 호출하는 방법  (0) 2023.02.21
특정 사용자가 소유한 모든 테이블에서 선택 허용  (0) 2023.02.21
AngularJS에서의 ng-binding이란 무엇입니까?  (0) 2023.02.21
Word press - 라디오 버튼 체크아웃 woocommerce 표시/숨기기 필수 필드  (0) 2023.02.21
이전 React 버전에서 create-react-app을 사용하는 방법  (0) 2023.02.21

'programing'의 다른글

  • 현재글각을 사용하여 중첩된 양식 유효성 검사 건너뛰기JS

관련글

댓글

티스토리툴바