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。我可以看到表格在输入字段中仍然无效，但是错误消息从未从“请输入密码”切换为“密码必须为8个字符以上”。密码达到8个字符后，该字段将不再无效，因此我可以确定验证器正在工作，只是错误消息没有显示。

Answer 1

Inputs Documentation说

注意：验证仅在用户离开后显示错误专注于输入。这是为了获得更好的用户体验，而用户看不到他们仍在输入时出错。

这意味着通过设计您在输入时将永远不会看到错误消息

Answer 2

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

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

清晰度ClrFormsNextModule * clrIfError反应形式

2 个答案: