角 2++ | NgForm：Form.Dirty 总是脏的

Question

确定 NgForm 是否与 任何用户输入之前的 完全一样

---

似乎form.dirty 在更改后不会对其值进行编辑，而form.touched 似乎总是false，无论如何：dirty 是touched，touched 是tetched。 模板.html

<form #form="ngForm" (ngSubmit)="handleSubmission($event, {}, form)">
    ...
    <input
        #input
        type="text"
        [name]="item.title"
        [(ngModel)]="item.estimate"
        (ngModelChange)="handleEstimateChange(item, item.estimate, input, form)"
    />
    ...
</form>

组件.ts

export class LeComponent {
    @Input('data') public data: any;
    public handleEstimateChange: Function;

    constructor(private $: Sandbox) {
        this.handleEstimateChange = $.debounce(this.handleEstimate.bind(this), (1000*0.2));
    }

    handleEstimate(item: any, estimate: number, input: HTMLInputElement, form: NgForm) {
        if (!estimate) delete item.esitmate;
        (this, item, estimate, input, form);
        // Why does form.dirty never change back to pristine again???
    }

}

在 TypeScript 中，我正在去抖动 ngModelChange 处理程序，以便 Angular 在我检查之前有机会更改 form.dirty 值。这是因为ngModelChange 在NgForm 对象被修改之前被触发。

如果!estimate，因为estimate === ""，则将其设置回其原始值undefined。在这种情况下，表单应该看起来完全就像它在任何用户输入发生之前一样。

但是，当我在评论正上方的行上放置一个断点并将form.dirty 输出到console 时，NgForm 永远不会将dirty 更改回false。

是否可以确定表单的外观是否完全与任何用户输入之前的外观一样？

显然，我可以编写自己的 dirty 逻辑，但这是否意味着 NgForm 有点没用？一定有什么我想念的，对吧？ 脏怎么可能不代表脏？

我查看了其他一些 SO 问题——第一个类似但绝对不是我要问的问题。他们在问这是否是故意的——我不在乎；我想知道如何实现上述目标。

关闭，但没有雪茄：

angular2 formcontrol stays dirty even if set to original value

Block routing if form is dirty [ Angular 2 ]

Angular 2 getting only the dirty values in a controlgroup

How do I programmatically set an Angular 2 form control to dirty?

Angular 2.x/4.x & bootstrap: patchValue does not alter dirty flag. Possible bug?

Answer 1

使用模板驱动的表单和非常扁平的数据模型，我是这样实现的：

private currentProduct: IProduct;
private originalProduct: IProduct;

get isDirty(): boolean {
    return JSON.stringify(this.originalProduct) !== JSON.stringify(this.currentProduct);
}

get product(): IProduct {
    return this.currentProduct;
}
set product(value: IProduct) {
    this.currentProduct = value;
    // Clone the object to retain a copy
    this.originalProduct = Object.assign({}, value);
}

但这仅适用于非常简单的情况。

正如我在 cmets 中提到的，使用响应式表单可以让您更灵活地管理与用户条目分开的数据模型。

Answer 2

什么是最有用的

---

模板.html

<form #form="ngForm" (ngSubmit)="handleSubmission($event, {}, form)">
    ...
    <input
        #input
        type="text"
        [name]="item.title"
        [attr.name]="item.title"
        [(ngModel)]="item.estimate"
        (ngModelChange)="handleEstimateChange(item, item.estimate, input, form)"
    />
    ...
</form>

组件.ts

export class LeComponent {
    @Input('data') public section: any;
    public handleEstimateChange: Function;

    private resetFormControl = (input: HTMLInputElement, form: NgForm) => {
        var name = input.name, control = form.controls[name];
        control.reset();
        // control.markAsPristine();
        // control.setValue(undefined);
        // control.updateValueAndValidity();
    };

    constructor(private $: Sandbox) {
        this.handleEstimateChange = $.debounce(this.handleEstimate.bind(this), (1000*0.2));
    }

    handleEstimate(item: any, estimate: number, input: HTMLInputElement, form: NgForm) {
        if (!estimate) this.resetFormControl(input, form);
        (this, item, estimate, input, form);
        // Why does form.dirty never change back to pristine again???
    }

}

注意

• [attr.name]="..." (template.html)
• resetFormControl

基本上，仅仅 deleteing 值是不够的，因为它仍然存在于 FormControl 对象 (form.controls) 上。要正确清除它，请为单个控件调用control.reset()——这反过来又调用.markAsPristine()，它与父NgForm通信。此外，input.name 是空的，因为它仅由 ng-reflect-name 表示，除非 [attr.name] 阐明了相同的值——[name] 确实存在，因为 Angular 需要它。

现在，只要 <input /> 值发生变化——并且它是假的——我们重置输入以确保如果 all 都是假的，Angular 将自动处理 @ 987654336@ 的脏状态正确。