将AngularJS嵌套表单设置为已提交

发布时间：2020-12-17 10:18:41 所属栏目：安全来源：网络整理

导读：我有一个嵌套的AngularJS表单,如下所示： form name="parentForm" ng-submit="submit()" input name="parentInput" type="text" ng-include src="childForm.html" ng-form="childForm"/ng-include button type="submit"Submit/submit/form 这是childForm.htm

我有一个嵌套的AngularJS表单,如下所示：

<form name="parentForm" ng-submit="submit()">
    <input name="parentInput" type="text">
    <ng-include src="childForm.html" ng-form="childForm"></ng-include>
    <button type="submit">Submit</submit>
</form>

这是childForm.html

<input name="childInput" type="text">

由于与问题无关的原因,我无法合并父表格和子表单 – 它们需要是两个单独的文件.

现在,当用户单击提交按钮时,验证将正确应用于parentForm和childForm.但是,只有父表单将其$submitted标志设置为true,这是有问题的,因为我使用它来触发某些错误消息的显示.如果父表单是$submit,我不希望子表单检查,因为它们是两个单独的文件.我遇到的唯一选择是让child()方法在子窗体上调用$setSubmitted(),这是很尴尬的,因为现在父窗体需要直接引用子窗体.是否有更好的方法将子表单的$提交为true？

作为Meeker解决方案的扩展,您可以通过向父表单添加监视来隐式实现$broadcast：

.directive('form',function() {
  return {
    restrict: 'E',require:  'form',link: function(scope,elem,attrs,formCtrl) {

      scope.$watch(function() {
        return formCtrl.$submitted;
      },function(submitted) {
        submitted && scope.$broadcast('$submitted');
      });
    }
  };
})

.directive('ngForm',function() {
  return {
    restrict: 'EA',formCtrl) {

      scope.$on('$submitted',function() {
        formCtrl.$setSubmitted();
      }); 
    }
  };
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!