角材料与ReactiveForms冲突

Question

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

这是常规的（好）：

输入密码时的密码（良好）：

取消/模糊（不良）时此：

当输入无效输入（好）时，这是：

我知道当保持空白（onUnfocus）时，反应形式会触发验证器。我正在尝试找到一种方法来控制或控制“角度”材质警告颜色，因此它不会在左侧为空的验证器时触发。

Answer 1

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

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

或者，使用反应式表单，您可以为这些字段实现自定义ErrorStateMatcher，这样，“必需”的验证程序将仅在提交表单时（而不是在触摸该字段时）抛出错误。对于这种情况，以这种方式关闭“触摸式”验证是相当普遍的-您可以修改此处显示的“ Angular Material”示例：https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown。

Answer 2

尝试使用正则表达式传递空字符串以及模式。

Store

您可以在此处查看它的运行情况：http://jsfiddle.net/BAXya/