Angular Material 与 ReactiveForms 冲突
Angular Material conflicting with ReactiveForms
我有一个包含 2 个 matInputs（用户名和密码）的登录页面。我将 mat-error 元素添加到 matInputs 中，因此当输入无效用户名时，mat-form-field 会显示一条错误消息。此外，两个输入都是反应形式的一部分。所以他们都有 "formControlName" 属性。
问题是，当我从其中一个输入字段（没有输入用户名或密码）上移开注意力时，来自 Angular material 的警告颜色作为反应式表单验证器的一部分触发（username/password 不应该为空） .
我提供图片，我可以提供代码。
这是正常的（好）：
输入密码时这个（好）：
这时 Unfocues/Blur（差）：
输入无效输入时（好）：
我知道反应式表单在留空时会触发验证器 (onUnfocus)。我正在尝试找到一种方法来控制它或控制 Angular material 警告颜色，因此它不会在左侧为空的验证器时触发。
有不同类型的字段验证，还有表单 (submit/login) 验证。在实际层面上，您需要表单验证而不是字段验证 not empty/required。默认情况下，字段验证（用于表单控件或 'required' 属性指令的验证器）在字段为 'touched' 时立即激活。因此，如果您创建一个字段 'required'，即使用户没有输入值，只要用户应用并移除焦点，就会立即显示错误。但是，只有在提交表单时才会进行表单验证。
您有两个选择 - 不要将这些字段设为必填，而是将它们作为提交功能的一部分进行检查，然后在需要时在表单控件上设置错误。您还需要注意在用户输入值或聚焦字段时清除这些错误。
或者，对于响应式表单，您可以为这些字段实现自定义 ErrorStateMatcher，这样 'required' 验证器只会在提交表单时抛出错误，而不是在触及字段时抛出错误.以这种方式关闭 'touched' 验证对于这种事情来说是相当普遍的——您只需修改此处显示的 Angular Material 示例：https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.
我有一个包含 2 个 matInputs（用户名和密码）的登录页面。我将 mat-error 元素添加到 matInputs 中，因此当输入无效用户名时，mat-form-field 会显示一条错误消息。此外，两个输入都是反应形式的一部分。所以他们都有 "formControlName" 属性。 问题是，当我从其中一个输入字段（没有输入用户名或密码）上移开注意力时，来自 Angular material 的警告颜色作为反应式表单验证器的一部分触发（username/password 不应该为空） . 我提供图片，我可以提供代码。
这是正常的（好）：
输入密码时这个（好）：
这时 Unfocues/Blur（差）：
输入无效输入时（好）：
我知道反应式表单在留空时会触发验证器 (onUnfocus)。我正在尝试找到一种方法来控制它或控制 Angular material 警告颜色，因此它不会在左侧为空的验证器时触发。
有不同类型的字段验证，还有表单 (submit/login) 验证。在实际层面上，您需要表单验证而不是字段验证 not empty/required。默认情况下，字段验证（用于表单控件或 'required' 属性指令的验证器）在字段为 'touched' 时立即激活。因此，如果您创建一个字段 'required'，即使用户没有输入值，只要用户应用并移除焦点，就会立即显示错误。但是，只有在提交表单时才会进行表单验证。
您有两个选择 - 不要将这些字段设为必填，而是将它们作为提交功能的一部分进行检查，然后在需要时在表单控件上设置错误。您还需要注意在用户输入值或聚焦字段时清除这些错误。
或者，对于响应式表单，您可以为这些字段实现自定义 ErrorStateMatcher，这样 'required' 验证器只会在提交表单时抛出错误，而不是在触及字段时抛出错误.以这种方式关闭 'touched' 验证对于这种事情来说是相当普遍的——您只需修改此处显示的 Angular Material 示例：https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.