如何通过重新输入原始值来制作 Angular 表单字段 "clean"？
How to make an Angular form field "clean" by re-typing original value?
在我使用 Angular 表单的代码库中，用户打开一个条目进行编辑，各个字段都预先填充了当前值。 保存 按钮开始禁用，因为在 Angular 意义上没有任何内容 dirty。如果用户输入一个字段并开始键入，该字段会变脏并且 保存 会启用。
在编辑表单值的过程中，有检查禁用保存按钮，如果：
- 必填字段为空，
- 需要特定格式的字段包含无效条目，
- 条目超过允许的长度，
...等等，最后
- 即使
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;
}
两个问题：
一个。尽管从一个角度来看似乎 "obvious"（没有任何改变，所以为什么要保存它？），但最后一点是用户体验意义上的常见最佳实践吗？希望看到有关它的文章或参考资料。
乙。有没有办法让 Angular 表单自动执行此操作（即将字段设置回非脏）而无需添加显式代码来检查新值与旧值？
您想要做的事情对于 UI 来说是有意义的，尽管您可能会考虑允许用户点击按钮并显示某种消息，提醒他们实际上没有进行任何更改。或者，如果它被禁用，请告诉他们原因。
问题 A 可能会在 UX StackExchange 进一步展开
(Relevant question over there)
至于为什么 Angular 选择让 "dirty" 状态工作，因为它更多的是他们的选择，我认为脏状态是由任何 "change" 触发的事件。正如您已经看到的那样，它不会跟踪原始值。
A control is dirty if the user has changed the value in the UI. (Source)
HTML5 input spec 中也有关于脏字段的信息
Each input element has a boolean dirty value flag. The dirty value
flag must be initially set to false when the element is created, and
must be set to true whenever the user interacts with the control in a
way that changes the value.
这并没有说明将值 返回 更改为 false/clean。所以 Angular 可能会跟随它。
很遗憾，问题 B 的答案是否定的。您必须以某种方式比较这些值，然后使用 markAsPristine() 或重置表单来执行此操作，或者除了使用 "dirty" 状态之外只进行单独的手动检查。
在我使用 Angular 表单的代码库中，用户打开一个条目进行编辑，各个字段都预先填充了当前值。 保存 按钮开始禁用，因为在 Angular 意义上没有任何内容 dirty。如果用户输入一个字段并开始键入，该字段会变脏并且 保存 会启用。
在编辑表单值的过程中，有检查禁用保存按钮，如果：
- 必填字段为空，
- 需要特定格式的字段包含无效条目，
- 条目超过允许的长度，
...等等，最后
- 即使
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;
}
两个问题：
一个。尽管从一个角度来看似乎 "obvious"（没有任何改变，所以为什么要保存它？），但最后一点是用户体验意义上的常见最佳实践吗？希望看到有关它的文章或参考资料。
乙。有没有办法让 Angular 表单自动执行此操作（即将字段设置回非脏）而无需添加显式代码来检查新值与旧值？
您想要做的事情对于 UI 来说是有意义的，尽管您可能会考虑允许用户点击按钮并显示某种消息，提醒他们实际上没有进行任何更改。或者，如果它被禁用，请告诉他们原因。 问题 A 可能会在 UX StackExchange 进一步展开 (Relevant question over there)
至于为什么 Angular 选择让 "dirty" 状态工作，因为它更多的是他们的选择，我认为脏状态是由任何 "change" 触发的事件。正如您已经看到的那样，它不会跟踪原始值。
A control is dirty if the user has changed the value in the UI. (Source)
HTML5 input spec 中也有关于脏字段的信息
Each input element has a boolean dirty value flag. The dirty value flag must be initially set to false when the element is created, and must be set to true whenever the user interacts with the control in a way that changes the value.
这并没有说明将值 返回 更改为 false/clean。所以 Angular 可能会跟随它。
很遗憾，问题 B 的答案是否定的。您必须以某种方式比较这些值，然后使用 markAsPristine() 或重置表单来执行此操作，或者除了使用 "dirty" 状态之外只进行单独的手动检查。