Значок проверки clr не запускается при неправильном вводе, и всегда отображается сообщение об ошибке - PullRequest
Новая
       6

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

0 голосов
/ 06 февраля 2019

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

1 Ответ

0 голосов
/ 06 февраля 2019

у вас есть HTML / CSS-версия элементов управления формы, которые не имеют встроенной проверки.Мы еще не создали функциональность группы ввода, которая также работает с Angular, поэтому вам придется вручную переключать отображение сообщения об ошибке.Вы можете увидеть несколько демонстраций этого здесь: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html

Вот демонстрация, основанная на вашем примере чего-то, что работает с нашей разметкой, но в настоящее время требует некоторых ручных усилий с вашей стороны.В конце концов это будет поддерживаться в угловом компоненте, но не в данный момент.

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>
...