当用户未在选择框中选择值时,我试图提供错误消息。当我们处理<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;
我的问题是:使用选择框进行验证的最佳做法是什么?
答案 0 :(得分:2)
IMO,不需要使用选择框验证任何类型。原因是,对于选择框,您确实指定了可能的选择,用户必须选择其中一个。
保持简单:您无需显示额外选项<option value="" disabled>- Select an API Technology -</option>
。只需显示可用的technologies
即可。
如果您真的想要,可以显示静态警告。检查这个plunker:https://plnkr.co/edit/gCgmzU。
答案 1 :(得分: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。