代码之家 › 专栏 › 技术社区 › 3gwebtrain

如何为我们的需求定制select元素,或者如何将下拉列表转换为可验证的select组件

angular8 angular css html javascript

0

3gwebtrain · 技术社区 · 6 年前

select 制造这个模型的组件。但作为一种选择,我可以使用 ul 匹配相同的。但在我的angular应用程序中,我使用的是Reactiveform,因此,我无法添加验证错误。

Mytry

这是我的模型:

0 回复 | 直到 6 年前

1

0

Eftychios Karagiorgis 6 年前

使用 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 如果你在你的项目中使用角度引导,它有一些额外的功能,比如清晰和样式。