각도 js에서 프로그래밍 방식으로 폼 유효성 검사 활성화

Question

사용자 지정 지시문을 사용하여 프로그래밍 방식으로 양식을 제출하지만 양식을 제출하기 전에 양식 유효성 검사가 적용되지 않습니다. 양식 필드에 $setDirty()을 호출했으며 양식에 $setSubmitted()을 호출했지만 필수 양식 필드가 비어 있어도 양식은 계속 제출됩니다.

지침은/

export default class externalSubmit { 
    constructor ($timeout) { 
     'ngInject'; 
     this.$timeout = $timeout; 
     this.restrict = 'A'; 
     this.scope = {}; 
    } 

    link($scope, $element, $attrs) { 
     $scope.$on('submit-form', function(event, data){ 
      if(data.id === $attrs.id) { 
       setTimeout(function() { 

       /** 
       * set form and fields to dirty 
       * this should be enabling validation 
       **/ 
       var $formScope = angular.element($element).scope(); 
       var $formController = $formScope[formName]; 

       $formController.$setDirty(); 
       $formController.$setSubmitted(); 
       angular.forEach($formController.$error.required, function(field) { 
       field.$setDirty(); 
       }); 

       // trigger form submit 
       $element.triggerHandler('submit'); 
       }, 0); 
      } 
     }); 
    } 

    // Create an instance so that we can access this inside link 
    static factory() { 
     externalSubmit.instance = new externalSubmit(); 
     return externalSubmit.instance; 
    } 
}; 

푸/foo.controller.js external.submit.js

export default class FooController { 
    constructor($rootScope) { 
     'ngInject'; 

     this.$rootScope = $rootScope; 
     this.item = {}; 

    } 

    save() { 
     alert('Save triggered'); 
    } 

    submitForm(id) { 
     // if no form id given, use the first form in the content area 
     if (! id) id = $('form')[0].id; 
     this.$rootScope.$broadcast('submit-form',{'id':id}); 
    } 

} 

foo는/foo.html을

<form external-submit id="primary" ng-submit="$ctrl.save()" go-back="dashboard.home()"> 
    <input type="hidden" ng-model="$ctrl.item.id"/> 
    <input required name="title" ng-model="$ctrl.item.title" type="text" /> 
    <button type="submit">Internal Submit</button> 
</form> 

<button type="submit" ng-click="$ctrl.submitForm()">External Submit</button> 

Answer 1

해결 방법은 0을 확인하는 것입니다.을 입력하여 submit 처리기를 트리거하기 전에 양식이 유효한 지 확인하십시오.

link($scope, $element, $attrs, $ctrl) {  

    $scope.$on('submit-form', function(event, data){ 

     if(data.id === $attrs.id) { 
      let formName = $attrs.name; 
      setTimeout(function() { 

      // get the element scope 
      var $formScope = angular.element($element).scope(); 

      // get the form controller using the form name 
      var $formController = $formScope[formName]; 
      $formController.$setSubmitted(); 

      // check if form is valid before triggering submit 
      if ($formController.$valid) { 
       $element.triggerHandler('submit'); 
      } 

      // required to update form styles 
      $scope.$apply(); 

      }, 0); 
     } 
    }); 
} 

Answer 2

사용 ng-submit="$valid && $ctrl.save()"