Vmware clarity Clarity ClrFormsNextModule*clrIfError反应式表单

将Clarity用于工作项目，我不确定新的clr控制错误消息是否适用于被动表单。他们提供的关于使用多个错误消息的示例是模板表单，但是设置基本上应该是相同的

这是我的密码：

<clr-input-container>
  <label>Password</label>
  <input clrInput type="password" formControlName="password">
  <clr-control-helper>8+ Character Password</clr-control-helper>
  <clr-control-error *clrIfError="'required'">Please Enter Password</clr-control-error>
  <clr-control-error *clrIfError="'minLength'">Password must be 8+ Characters</clr-control-error>
</clr-input-container>

newCompanyForm = new FormGroup({
   email: new FormControl("", [Validators.required]),
   password: new FormControl("", [Validators.required, Validators.minLength(8)]),

密码
8个以上字符的密码
请输入密码
密码必须超过8个字符
newCompanyForm=新表单组({
电子邮件：new FormControl（“，[Validators.required]），
密码：new FormControl（“，[Validators.required，Validators.minLength（8）]，

我正在使用@clr/angular v0.12.4、angular 6.0.2和rxjs 6.1.0。一旦我开始在输入字段中键入，我可以看到表单仍然无效，但错误消息从未从“请输入密码”切换到“密码必须是8个以上字符”。一旦密码达到8个字符，该字段就不再无效，因此我很确定验证程序正在工作，只是没有显示错误消息。

说明

注意：验证仅在用户离开后显示错误 关注输入。这是为了在用户看不到输入的情况下实现更好的用户体验 他们仍在键入时出错

---

这意味着，通过设计，您在键入时将永远不会看到错误消息。看起来

maxLength

和

minLength

在错误对象的内部被转换为

maxLength

和

minLength

。这应该在下面修复它，尽管我将对此进行研究，并再次检查它在这两种情况下是否都有效和模板驱动的表单

<clr-control-error *clrIfError="'minlength'">

这是为了避免在用户第一次尝试正确填写时显示错误状态。填写电子邮件时，如果一直被告知“电子邮件无效”，而不是显示有用的帮助器文本，这是非常令人沮丧的。事实上，文档说明了他们为什么在最后进行此设计他们说，实时验证在某些情况下是有用的。想知道如何做到这一点（顺便说一句，文档仍在进行中）我明白这一点，但即使在离开焦点时，第二条错误消息helper也不会显示。如果我点击输入栏并退出，我将始终看到第一条错误消息。如果我键入少于8个字符并单击退出，则输入仍然是红色，表示formControl仍然无效（并且表单仍然无效，我无法提交它），但第二个帮助器消息（minLength）不会显示。您能提供一个stackblitz来重现问题吗？您的代码在

中。

？@JeremyWilken这里有一个stackblitz来重现问题。minLength错误消息从未显示。将*CLRIFEROR切换到“minLength”而不是“minLength”似乎已经解决了问题。看起来像是我需要更新他们的文档，因为他们的示例代码中有“minLength”，这可能会导致我的混淆。感谢大家的帮助！这是我在文档中的错误，它应该反映HTML属性名称，如果它们存在（

minLength

是HTML属性，而不是

minLength

，因为HTML不区分大小写）。