在 Angular 中取消提交表单

Question

我需要一个能够同时成为 $dirty 和不是 $submitted 的表单才能使我的验证工作。

我正在尝试通过 CSS 使用由 angular 动态添加的 .ng-invalid、.ng-dirty 和 .ng-submitted 类来实现这一点。这意味着我不能简单地将表单上的 $submitted 设置为 false，因为这不会删除关联的类。我也不能使用$setPristine 或$setUntouched，因为它们会删除$dirty 标志及其类。

有没有办法将表单设置为未提交，以便删除 .ng-submitted 类并且表单仍然脏？

Answer 1

您可以使用$setPristine，后跟$setDirty。如果您想保留 $dirty 值，请在将其设置为原始值之前将其保存。

var formWasDirty = form.$dirty;

form.$setPristine(); 

if (formWasDirty) { 
  form.$setDirty();
}

http://plnkr.co/edit/nCgu7eBWAXwO3xeYTa6V?p=preview

Answer 2

不幸的是，there isn't a built in $setUnsubmitted 在 Angular 中起作用。

但是，$setSubmitted 函数的 source 非常简单。您可以轻松地利用表单指令上的装饰器来提供此功能。

angular.module('YourModule').directive('form', function() {
    return {
        require: 'form',
        link: function(scope, element, attrs, form) {
            form.$setUnsubmitted = function() {
                element.removeClass('ng-submitted');
                form.$submitted = false;
                if (form.$$parentForm.$setUnsubmitted) { // may be nullFormCtrl
                    form.$$parentForm.$setUnsubmitted();
                }
            };
        }
    };
});

如果 Angular 团队将来选择包含此方法，您只需删除此装​​饰器而不更改其他代码。

Plunk example here