Clarity ClrFormsNextModule *clrIfError 响应式表单

Question

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

这是我的代码：

<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)]),

我正在使用@clr/angular v0.12.4、angular 6.0.2 和 rxjs 6.1.0。一旦我开始在输入字段中键入内容，我可以看到表单仍然无效，但错误消息从未从 "Please Enter Password" 切换到 "Password must be 8+ Characters"。一旦密码达到 8 个字符，该字段就不再无效，所以我很确定验证器正在工作，只是没有显示错误消息。

Answer 1

Inputs Documentation 说

Note: the validation only displays an error after the user has left focus on an input. This is for better UX where the user doesn't see an error while they are still typing.

这意味着您在输入时永远不会看到错误消息

Answer 2

看起来 maxLength 和 minLength 在错误对象内部被转换为 maxlength 和 minlength。这应该在下面修复它，尽管我将对此进行调查并仔细检查它在反应式和模板驱动形式下的工作情况。

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

Clarity ClrFormsNextModule *clrIfError 响应式表单

Clarity ClrFormsNextModule *clrIfError Reactive Forms

vmware-clarity