Как выполнить проверку формы для поля выбора?

Я пытаюсь предоставить сообщение об ошибке, когда пользователи не выбирают значение в поле выбора. Документация VMware Clarity довольно ясна, когда мы имеем дело с <input type="text"> элементами (щелкните здесь), в котором говорится:

Вы можете использовать стиль проверки для полей ввода, заключив тег ввода в контейнер с классом .tooltip вместе с классом .tooltip-validation. Используйте класс .invalid в контейнере .tooltip-validation, чтобы переключить стиль проверки. Поместите .tooltip-content после тега input.

Нет документации, объясняющей, как мы должны выполнять проверку с помощью полей выбора (щелкните здесь ).

Итак, я попробовал следующее:

<div class="form-group">
    <label for="technology">Technology</label>
    <div class="select tooltip tooltip-validation tooltip-sm invalid">
        <select formControlName="technology">
            <option value=""
                disabled>- Select an API Technology -</option>
            <option *ngFor="let technology of technologies"
                [value]="technology">{{technology}}</option>
        </select>
        <span class="tooltip-content">
            Technology is required.
        </span>
    </div>
</div>

Вот результат, который я получаю:

введите описание изображения здесь

Обратите внимание, что значок всплывающей подсказки есть, но когда пользователь щелкает, он не показывает желаемый контент «Требуются технологии»

У меня вопрос: как лучше всего выполнять проверку с помощью полей выбора?


angular vmware-clarity
person Max    schedule 18.10.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

ИМО, вам не нужна какая-либо проверка с полями выбора. Причина в том, что для поля выбора вы указываете возможные варианты выбора, и пользователь должен выбрать один из них.

Будьте проще: вам не нужно показывать дополнительную опцию <option value="" disabled>- Select an API Technology -</option>. Просто покажите доступные technologies.

При желании можно показать статическое предупреждение. Проверьте этот плункер: https://plnkr.co/edit/gCgmzU.

person Soumya Kanti    schedule 20.10.2017
comment
Изменить бизнес-требования не всегда возможно. Такой ответ не соответствует духу Stack Overflow, потому что любой, кто направлен сюда через Google, узнает только ваше мнение о UX, а не о решении проблемы. - person kryger; 20.10.2017
comment
Что ж, это не мнение. Я использовал IMO как скромный способ выразить свои мысли. У каждого дизайна или алгоритма есть своя философия, и я хотел выделить ее. Иногда вы просто не можете обобщить ситуацию, и вам нужно взглянуть на вещи в перспективе. Я регулярно использую переполнение стека, и я видел много таких ответов, включая принятые ответы, представленные аналогичным образом. Любой, ИМО, это не нарушает духа Stack Overflow. Все проблемы индивидуальны, и не у каждой проблемы есть однозначное решение. - person Soumya Kanti; 20.10.2017
comment
@SoumyaKanti Спасибо за вашу помощь. Моя форма довольно сложна, некоторые поля выбора должны иметь значение. Ваше предложение хорошее, и я слежу за ним. Но я разместил этот вопрос здесь в надежде, что будет некоторая документация Clarity не только для проверки текстовой области, но и для поля выбора. - person Max; 28.11.2017
comment
@Max Я опубликовал еще один ответ, который может соответствовать вашим требованиям. Однако я по-прежнему за первый ответ. - person Soumya Kanti; 28.11.2017
comment
@SoumyaKanti Я тоже предпочитаю твой первый ответ. - person Max; 29.11.2017

arrow_upward
1
arrow_downward

Я разработал решение, которое может сработать для вас:

app.component.html:

<clr-main-container>
  <div class="content-container">
    <div class="content-area">
      <form class="form" (ngSubmit)="onSubmit()" [hidden]="submitted">
        <section class="form-block">
          <div class="form-group">
            <label for="technology">API Technology</label>
            <div class="select">
              <select class="form-control" name="technology" (change)="onChange($event.target.value)">
                <option value="" disabled>- Select an API Technology -</option>
                <option *ngFor="let technology of technologies" [value]="technology">{{technology}}</option>
              </select>
              <span class="tooltip-content" *ngIf="hide">
                  Technology is required.
              </span>
            </div>
          </div>
        </section>
      </form>
      <button class="btn btn-primary" type="submit">Add</button>
    </div>
  </div>
</clr-main-container>

app.component.ts:

export class AppComponent {
  public hide: boolean = true;
  public technologies = ["RPC", "SOAP", "REST"];

  onChange(technology) {
    console.log(technology);
    this.hide = false;
  }
}

Вот Plunker: https://plnkr.co/edit/G5tuUCh1gc4xPTBiJWxe.

person Soumya Kanti    schedule 28.11.2017