1

当用户未在选择框中选择值时，我试图提供错误消息。当我们处理<input type="text">元素时，VMware Clarity 文档非常清楚（单击此处），其中说：

您可以通过将输入标记包装在具有 .tooltip 类和 .tooltip-validation 类的容器中来对输入字段使用验证样式。使用 .tooltip-validation 容器上的 .invalid 类来切换验证样式。将 .tooltip-content 放在输入标签之后。

没有文档解释我们应该如何使用选择框进行验证（单击此处）。

所以，我尝试了以下方法：

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

这是我得到的结果：

在此处输入图像描述

请注意，工具提示图标在那里，但是当用户单击时，它没有显示所需的内容“需要技术”

我的问题是：使用选择框进行验证的最佳做法是什么？

4

2 回答 2

3

IMO，您不需要使用选择框进行任何类型的验证。原因是，对于选择框，您确实指定了可能的选择，并且用户必须选择其中之一。

保持简单：您不需要显示额外选项<option value="" disabled>- Select an API Technology -</option>。只需显示可用的technologies.

如果你真的想要，你可以显示一个静态警告。检查这个插件：https ://plnkr.co/edit/gCgmzU 。

于 2017-10-20T07:54:03.773 回答
1

我制定了一个适合您的解决方案：

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 。

于 2017-11-28T08:27:31.877 回答