取消 Angular 表单提交

Question

我需要一个表单既可以是$dirty，又不可以是$submitted，以便我的验证工作。

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

有没有办法将表单设置为未提交状态，以便删除.ng-submitted类并保留表单的脏数据状态？

- TomSlick

---

你可以使用$setPristine，然后跟着使用$setDirty。 - Jan

太棒了！谢谢。 - TomSlick

Plunker：http://plnkr.co/edit/nCgu7eBWAXwO3xeYTa6V?p=preview - Jan

Answer 1

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

var formWasDirty = form.$dirty;

form.$setPristine(); 

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

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

- Jan

---

请记住，这会丢弃个别表单控件上的脏状态。 - Taylor Buchanan

Answer 2

不幸的是，在Angular中没有内置的$setUnsubmitted函数。

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

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示例

- Taylor Buchanan

---

不错，唯一让我犹豫的是它模仿了 Angular 命名的本地行为。如果 Angular 的某个版本更新了 $setUnsubmitted（这并不是不可能的），这将覆盖它，可能会引起很多混乱。我会考虑重新命名它，甚至可以添加一个条款，记录一个消息，说明该方法现在存在，应该删除脚本。类似于 http://plnkr.co/edit/zg4isVLStZ2S2Edbg7c7?p=preview - Jan

命名是有意为之的，以避免如果Angular团队引入此方法而需要进行任何重大的重构。只需删除此自定义装饰器，您的代码中不需要进行其他更改。我希望任何开发人员在升级库之前都会审查更改，但如果您担心忘记，您始终可以保留名称并在内置指令运行后包含日志记录作为装饰器。 - Taylor Buchanan