我使用自定义指令以编程方式提交表单,但在提交表单之前未应用任何表单验证。我已在表单字段上调用$setDirty()
并在表单上调用$setSubmitted()
,但即使所需的表单字段为空,表单仍会提交。
指令/ 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.controller.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.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>
答案 0 :(得分:0)
使用ng-submit="$valid && $ctrl.save()"
答案 1 :(得分:-1)
解决方法是在触发$formController
处理程序之前检查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);
}
});
}