clr 验证图标未在无效输入中触发，并且始终显示错误消息

Question

输入无效时如何设置clr-error。我已将输入字段设置为 required.

但是在页面加载时，clr-control-error 消息始终显示，而 exclamation-circle 从未显示，即使我点击输入并点击离开

<form class="clr-form clr-form-horizontal">
  <div class="clr-form-control clr-row">
    <div class="clr-control-container clr-col-4">
      <div class="clr-input-wrapper">
        <clr-icon shape="search"></clr-icon>
        <input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
        <clr-control-error>Search Input is required</clr-control-error>
      </div>
    </div>
  </div>
</form>

Answer 1

您得到的是 HTML/CSS 版本的表单控件，它没有内置验证。我们尚未创建也适用于 Angular 的输入组功能，因此您必须手动切换错误消息的显示。你可以在这里看到一些演示：https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html

这是一个基于您的示例的演示，它适用于我们的标记，但目前需要您进行一些手动操作。最终这将在 Angular 组件中得到支持，但目前不支持。

https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html

<form class="clr-form clr-form-horizontal">
  <div class="clr-form-control clr-row">
    <div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
      <div class="clr-input-wrapper">
        <div class="clr-input-group">
          <clr-icon class="" shape="search"></clr-icon>
          <input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
        </div>
        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
        <div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
      </div>
    </div>
  </div>
</form>

clr 验证图标未在无效输入中触发，并且始终显示错误消息

clr validate icon not getting triggered in invalid input and error message always displaying

vmware-clarity