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

【问题标题】：How to do form validation for a select box?如何对选择框进行表单验证？
【发布时间】：2017-11-28 16:27:31
【问题描述】：

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

您可以通过包装输入来对输入字段使用验证样式带有 .tooltip 类的容器中的标记以及 .tooltip-验证类。使用 .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>

这是我得到的结果：

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

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

【问题讨论】：

标签： angular vmware-clarity

【解决方案1】：

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

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

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

【讨论】：

改变业务需求并不总是可能的。像这样的回答不符合 Stack Overflow 的精神，因为通过 Google 指向这里的任何人都只会了解您对 UX 的看法，而不是问题的解决方案。
好吧，这不是意见。我用 IMO 来表达我的想法。每个设计或算法都有一个哲学，我想强调它。有时您只是无法概括事物，而需要透视事物。我是堆栈溢出的常客，我看到许多这样的答案，包括接受的答案，都以类似的方式呈现。任何，IMO，它不违反 Stack Overflow 的精神。每个问题都是不同的，并不是每个问题都有非黑即白的解决方案。
@SoumyaKanti 感谢您的帮助。我的表单很复杂，一些选择框需要有一个值。你的建议很好，我正在遵循。但是，我在这里发布了这个问题，希望有一些 Clarity 文档不仅用于文本区域验证，还用于选择框。
@Max 我又发布了一个答案，可能符合您的要求。不过，我仍然赞成第一个答案。
@SoumyaKanti 我也更喜欢你的第一个答案。

【解决方案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。

【讨论】：