значок проверки clr не запускается при неверном вводе, и всегда отображается сообщение об ошибке

Как установить 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>

vmware-clarity
person DarVar    schedule 06.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

у вас есть 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>
person Jeremy Wilken    schedule 06.02.2019