Question

在我的使用Angular表单的代码库中，用户打开一个要编辑的条目，并且各个字段都预先填充了当前值。 保存按钮开始被禁用，因为在角度意义上dirty一无是处。如果用户输入一个字段并开始输入，则该字段会变脏，并启用 Save 。

在编辑表单值的过程中，如果出现以下情况，则会进行检查以禁用保存按钮：

必填字段为空
要求某种格式的字段具有无效的条目，
输入的时间长于允许的时间，

...等等，最后

即使用户dirty，该值现在也已恢复为用户打开表单时的原始值。

这是本质：

<!-- template code -->
<input formControlName="name" type="text" (keyup)="handleNameChange()">
. . .
<button [disabled]="!updateForm.valid || disableSave">Save</button>
. . .

// backing code
public handleNameChange(): void {
  this.disableSave = this.updateForm.controls.name.value === this.original.name;
}

两个问题：

A。尽管从一个角度看似乎“显而易见”（什么都没有改变，所以为什么必须保存它？），最后一点是在UX方面的一种常见的最佳实践吗？很想看有关它的文章或参考。

B。有没有一种方法可以使Angular表单自动执行此操作（即将字段设置回非脏状态），而无需添加显式代码来对照旧值检查新值？

Answer 1

您想要做的事情对于UI来说很有意义，尽管您可能会考虑允许用户按下按钮并显示某种消息，警告他们实际上没有进行任何更改。或者，如果已禁用，请告诉他们原因。问题A可能会在UX StackExchange处扩展（Relevant question over there）

至于为什么Angular选择让“脏”状态起作用，是因为它更多地由他们选择，我认为脏状态是由任何“更改”事件触发的。它不会像您已经看到的那样跟踪原始值。

如果用户更改了UI中的值，则控件是脏的。（Source）

HTML5 input spec中还有一些有关脏字段的信息

每个输入元素都有一个布尔脏值标志。肮脏的价值创建元素时，标志必须最初设置为false，并且每当用户与控件中的控件交互时，必须将其设置为true 更改值的方式。

这与将值 back 更改为false / clean无关。因此，Angular可能会紧随其后。

不幸的是，问题B的答案为否。您将必须以某种方式比较这些值，然后使用markAsPristine（）或重置表单来执行此操作，或者除了使用“脏”状态外还需要单独进行手动检查。

如何通过重新键入原始值来使Angular表单字段“干净”？

1 个答案: