如何对 select 框进行表单验证？

Question

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

You can use validation styling for input fields by wrapping the input tag in a container with the .tooltip class along with the .tooltip-validation class. Use the .invalid class on the .tooltip-validation container to toggle the validation styling. Place the .tooltip-content after the input tag.

没有文档解释我们应该如何使用 select 个框 (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>

这是我得到的结果：

注意工具提示图标是有的，但是当用户点击的时候，并没有显示想要的内容"Technology is required"

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

Answer 1

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

保持简单：您不需要显示额外选项 <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。

如何对 select 框进行表单验证？

How to do form validation for a select box?

angular

vmware-clarity