Javascript 在angular js中以编程方式触发表单验证
我使用自定义指令以编程方式提交表单,但是在提交表单之前没有应用表单验证。我在表单字段上调用了Javascript 在angular js中以编程方式触发表单验证,javascript,angularjs,angularjs-directive,ecmascript-6,angular-validation,Javascript,Angularjs,Angularjs Directive,Ecmascript 6,Angular Validation,我使用自定义指令以编程方式提交表单,但是在提交表单之前没有应用表单验证。我在表单字段上调用了$setDirty(),在表单上调用了$setSubmitted(),但即使所需的表单字段为空,表单仍会提交 指令/external.submit.js export default class externalSubmit { constructor ($timeout) { 'ngInject'; this.$timeout = $timeout;
$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/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/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>
内部提交
外部提交
使用ng submit=“$valid&&$ctrl.save()”
解决方案是在触发提交处理程序之前检查$formController
表单是否有效
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);
}
});
}
好的,这会触发表单验证,但是,当我的字段有效时,不会调用$ctrl.save()——无论是在使用内部还是外部按钮时。为什么代码会注入$timeout,然后使用原始setTimeout
$超时正确地包装了setTimeout
,并与AngularJS摘要循环集成。使用原始设置超时似乎有问题。因为我得到的$timeout不是函数错误。将$timeout
打印到构造函数中的控制台显示它是未定义的
。有什么想法吗?