javascript - 如何根据我们的要求自定义选择元素或如何将下拉列表转换为可验证的选择组件

Question

我附加了视觉设计中的自定义选择组件。我需要重现它。达到我的水平，我无法自定义 select 组件来处理这个模拟。但作为一种选择，我可以使用 ul 创建一个下拉列表来匹配它。但是在我的 Angular 应用程序中，我使用的是 Reactiveform，因此，我无法在其中添加验证错误。

那么处理这种情况的正确方法是什么？

Mytry

这是我的模型:

Answer 1

使用 ReactiveForms您可以将验证器设置为您的任何表单控件

public readonly form: FormGroup = this.fb.group({
    SelectedValue: new FormControl("",Validators.required)
});

然后在您的模板中，您可以使用您想要在组件或其他组件中定义的任何选项，并在表单控件无效时设置一些标志和有用的消息。

Validators.required 将确保该字段是 form 所必需的有效

<div [formGroup]="form">
  <select formControlName="SelectedValue">
    <option *ngFor="let opt of options" [value]="opt.key">{{opt.value}}</option>
  </select>
  <h3 *ngIf="!form.controls.SelectedValue.valid">Selected Value field is required</h3>
  <button disabled="!form.controls.SelectedValue.valid" (click)="doSomething()"> Click me</button>
</div>

您的组件(不要忘记导入!):

****
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
****

constructor(private fb: FormBuilder){}
options = [{key:1,value:"A"},
           {key:2,value:"B"},
           {key:3,value:"C"}];

public readonly form: FormGroup = this.fb.group({
   SelectedValue: new FormControl("",Validators.required)
});

doSomething(){
   //ur logic goes here
   alert(this.form.value.SelectedValue);
}

另一种选择是使用 ng-select如果您在元素中使用 Angular Bootstrap，它具有一些额外的功能，如清晰和样式。