Question

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

您可以通过包装输入将验证样式用于输入字段带有.tooltip类的容器中的标记 .tooltip-validation类。使用.invalid类 .tooltip-validation容器用于切换验证样式。地点输入标记之后的.tooltip-content。

没有文档说明我们应该如何使用选择框进行验证（click here）。

所以，我尝试了以下内容：

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

以下是我得到的结果：

请注意工具提示图标在那里，但是当用户点击时，它不会显示所需的内容＆＃34;技术是必需的＆＃34;

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

Answer 1

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

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

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

Answer 2

我找到了一个适合你的解决方案：

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

如何对选择框进行表单验证？

2 个答案: