1

在我使用 Angular 表单的代码库中，用户打开一个要编辑的条目，并且各个字段都预先填充了当前值。该Save按钮开始禁用，因为没有任何东西dirty在角度意义上。如果用户输入一个字段并开始输入，该字段将变脏并Save启用。

在编辑表单值的过程中，如果出现以下情况，则会进行禁用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 表单有没有办法自动执行此操作（即，将字段设置回非脏），而无需添加显式代码来检查新值与旧值的对比？

4

1 回答 1

1

您想要做的事情对 UI 来说是有意义的，尽管您可能会考虑允许用户点击按钮并显示某种消息，提醒他们实际上没有进行任何更改。或者，如果它被禁用，请告诉他们原因。问题 A 可能会在UX StackExchange上进一步扩展 （相关问题在那里）

至于为什么 Angular 选择让“脏”状态工作，因为它更多地是他们的选择，我认为脏状态是由任何“更改”事件触发的。如您所见，它不会跟踪原始值。

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

HTML5 输入规范中也有关于脏字段的信息

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

这并没有说明将值更改回false/clean 的任何内容。所以Angular可能会遵循这一点。

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

于 2019-07-29T16:38:34.250 回答