Auslösen der Formularüberprüfung programmgesteuert in angular-js

Question

Ich verwende eine benutzerdefinierte Direktive, um ein Formular programmgesteuert zu übermitteln, jedoch wird vor dem Absenden des Formulars keine Formularüberprüfung angewendet. Ich habe $setDirty() auf dem Formularfeld und $setSubmitted() auf dem Formular aufgerufen, aber das Formular wird noch übergeben, auch wenn das erforderliche Formularfeld leer ist.

Richtlinien/external.submit.js

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/

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

foo.controller.js Die Lösung ist, 0 zu prüfen, um festzustellen, ob das Formular gültig ist, bevor der Handler submit ausgelöst wird.

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

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