根据当前表单状态在Angular 7+中以交互方式禁用表单提交按钮的最佳方法是什么？答案

【问题标题】：What is the best way of disabling form submit button interactively in Angular 7+ based on the current form status?根据当前表单状态在Angular 7+中以交互方式禁用表单提交按钮的最佳方法是什么？
【发布时间】：2019-10-07 21:01:18
【问题描述】：

这个问题可能看起来有点令人困惑，但假设我有一个如下所示的按钮：

<button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button

isInvalidForm() {
console.log('I am running!');
return this.nameValidator.errors || this.lastnameValidator.errors;
}

当它是这样的时候（我只是为了这个问题而简化了表格），它会记录 100 条“我正在跑步！”因为它被称为那么多。即使当我点击表单时，它又被调用了 100 次..

我怀疑这种检查按钮是否启用的方式看起来并不好.. 另一种方法是在按钮单击时触发该功能，但这绝对不是我想要的。避免大量调用该函数以禁用简单按钮的最佳方法是什么？（或者在 DOM 元素中使用函数真的可以吗？）

或者简而言之，使用：

<button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button>

与：

  <button type="button" class="menu-button" [disabled]="nameValidator.errors || lastnameValidator.errors">Save</button>

【问题讨论】：

“最佳”怎么样？您拥有的代码并没有做任何事情，所以谁在乎它是否被调用了数千次？您是通过函数调用还是其他方式付款？ ;)
@HereticMonkey - 它只是让人觉得我做错了什么，因为它被称为很多。是的，它没有多大作用，但我确实在乎。如果它是不必要的并且如果有更好的方法可以做到这一点，我不希望它被调用。感谢您的反馈

标签： html angular frontend web-frontend

【解决方案1】：

<button type="button" class="menu-button" [disabled]="!form.valid">Save</button

“每次表单控件的值发生变化时，Angular 都会运行验证并生成验证错误列表，这会导致无效状态，或者 null 会导致有效状态。” Official Angular Documentation

使用form.invalid 可能会启用按钮，直到异步验证完成。

【讨论】：

谢谢，但我的意思是，使用一个也只返回 !form.valid 的函数是否完全相同？
据我所知，这是禁用表单的常用方法。对您的函数和日志记录的调用只是角度的变化检测。我认为使用函数或直接绑定包装 from.valid 不会对更改检测产生影响。
@curiousBoy，使用 form.valid 的优点是您可以选择何时完成“检查”：-on change、模糊或提交。使用，例如{updateOn: 'blur'}你只检查模糊，见angular.io/api/forms/AbstractControlOptions
@Eliseo 终于！！！这就是我一直在寻找的答案。非常感谢。所以我可以通过将回调限制在某个特定事件而不是每个循环循环来从技术上减少回调的数量。您是否看到这些回调对性能有任何影响？只要它只是检查表单验证器错误（即使有 10,20 个表单控件），它最终会对性能产生人类可识别的影响吗？
我查找了AbstractFormControl的来源，验证状态存储为字符串。 form.valid 仅返回与此变量 this.status === 'VALID' 的字符串比较。验证仅在表单更改时运行，而不是在每个模板更改检测时运行。在 FormGroups/FormArrays 中，仅验证更改的控件及其父状态，而不是表单的所有控件。只要您的验证器运行时间不长（例如 http 请求），就不应该存在人类可识别的延迟。