自下而上将所有表单重新设置为原始状态答案

【问题标题】：Re-set all forms to pristine status from the bottom up自下而上将所有表单重新设置为原始状态
【发布时间】：2018-01-31 21:40:49
【问题描述】：

我们有相当复杂的 smDateTimePicker 指令。这个时间选择器控件可以是另一个指令的一部分，并且该指令可以放入表单（或选项卡）中。在那个 smDateTimePicker 指令中，我们将代码重置为原始状态（我刚刚添加了最后两行）：

DateTimePicker.prototype.setPristine = function () {
        if (this.form) {
            this.form.$setPristine();

            if (this.form.$$parentForm.$dirty) {
                this.form.$$parentForm.$setPristine();
            }
            if (this.form.$$parentForm.$$parentForm && this.form.$$parentForm.$$parentForm.$dirty) {
                this.form.$$parentForm.$$parentForm.$setPristine();
            }
        }
    };

我不喜欢我需要使用 $$parentForm 属性，并且我需要在我的特定情况下使用它两次。此外，如果我有更深的层次结构怎么办？有没有一种更清洁的方法可以从下到上将所有表单重新设置为原始状态？

【问题讨论】：

使用自下而上的方法设置原始看起来不正确...这段代码看起来太脆弱了，在任何情况下都可能中断。你应该怎么做才能从父级设置原始。如果最多，父母应该负责更新孩子的行为，反之亦然。
我同意，但我不确定在我们的情况下该复杂指令该怎么做。该指令具有 form 属性，该属性引用它正在使用的表单。不幸的是，不知何故，当我们在代码中更改 datepicker 值时，会设置最顶层的脏状态。我认为我们无法控制。
我认为（还不确定）这是设置最顶层表单脏状态的原因：this.datetimepicker = this.element.find(".input-group").datetimepicker(this.OPTIONS) ; this.datetimepicker.data("DateTimePicker").date(val);输入.val(val); DateTimePicker.link.onDateTimePickerChange.call(this, this.ngModelController); this.setPristine();
好的。在指令本身中执行此操作的一种方法（而不是一种解决方法）是通过递归循环来执行此操作 - 就像您将操纵一个树结构，您将在其中不断寻找父、祖父、曾祖父等递归方式。这将使您的代码对表单的层次结构不可知，并且会更干净+更少的代码行。我可以将那段代码作为示例编写。
我今天将发布我的答案。在这种情况下，递归似乎更明智，这就是我推荐它的原因。在这种情况下使用 $$parentForm 是不可避免的，我认为使用它没有什么大问题（尽管我理解你的担忧）

标签： javascript html angularjs

【解决方案1】：

看看这是否适合你。如果需要，您可能需要做一些小改动：

DateTimePicker.prototype.setPristine = function () {
        if (this.form) {
            setPristineToForm(this.form);
        }
    };

    // Recursive method - goes up the hierarchy of forms
    var setPristineToForm = function (form) {
        if (form) {
            //Check if a parent form exists. If it does, set parent's pristine 
            var parentForm = this.form.$$parentForm;

            if (parentForm) {
                setPristineToForm(parentForm);
            }
            else { //No parent exist. Set pristine to current form if it is dirty.
                if (form.$dirty)
                    form.$setPristine();
            }
        }
    };

【讨论】：

是的，这与我昨天实施的路线相同。效果很好。