Angular 材质与 ReactiveForms 冲突

Question

我有一个包含 2 个 matInputs（用户名和密码）的登录页面。我将 mat-error 元素添加到 matInputs 中，因此当输入无效用户名时，mat-form-field 会显示错误消息。此外，两个输入都是反应形式的一部分。所以他们都有“formControlName”属性。 问题是，当我从一个输入字段（不输入用户名或密码）中取消焦点时，来自 Angular 材料的警告颜色会作为反应表单验证器的一部分触发（用户名/密码不应为空）。 我提供了图片，我可以提供代码。

这是正常的（好）：

输入密码时的这个（好）：

当不聚焦/模糊（坏）时：

当输入无效输入时（好）：

我知道反应式表单在留空时会触发验证器（onUnfocus）。我正在尝试找到一种方法来控制它或控制 Angular 材料警告颜色，因此它不会与左空验证器一起触发。

Answer 1

有不同类型的字段验证，也有表单（提交/登录）验证。在实际层面上，您希望表单验证而不是字段验证非空/必需。默认情况下，只要字段被“触摸”，字段验证（表单控件中使用的验证器或“必需”属性指令）就会被激活。因此，如果您将字段设置为“必填”，则会在用户应用并移除焦点时立即显示错误，即使没有输入值也是如此。然而，表单验证仅在提交表单时进行。

您有两个选择 - 不要将这些字段设为必填，而是将它们作为提交功能的一部分进行检查，然后在需要时在表单控件上设置错误。当用户输入值或聚焦字段时，您还需要注意清除这些错误。

或者，使用响应式表单，您可以为这些字段实现自定义ErrorStateMatcher，这样“必需”验证器只会在表单提交时抛出错误，而不是在触摸字段时抛出错误。以这种方式关闭 'touched' 验证对于这种事情来说是相当常见的 - 您可以修改此处显示的 Angular Material 示例：https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown。