Angular 6材质自动完成验证
发布时间:2020-12-17 18:07:05 所属栏目:安全 来源:网络整理
导读:我们正在使用Angular 6材料开发我们的应用程序.我们有一个具有自动完成功能的选择框.我确实需要对我的选择框进行验证,因此,当用户搜索选项并且他/她不选择任何选项但将搜索词保留在选择框内时,因为只需要验证选择框,我的表单就会被发布到API.我想要实现的是
我们正在使用Angular 6材料开发我们的应用程序.我们有一个具有自动完成功能的选择框.我确实需要对我的选择框进行验证,因此,当用户搜索选项并且他/她不选择任何选项但将搜索词保留在选择框内时,因为只需要验证选择框,我的表单就会被发布到API.我想要实现的是不允许用户发布表单,除非他/她选择其中一个选项而不仅仅指定搜索词.我该如何实现这一目标?
<mat-form-field> <input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form.controls['SELECTBOX_VALUE']"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of myOptions | async" [value]="option.name"> <span>{{ option.name }}</span> </mat-option> </mat-autocomplete> </mat-form-field> <small *ngIf="!form.controls['SELECTBOX_VALUE'].valid && form.controls['SELECTBOX_DEGER'].touched" class="mat-text-warn">Please select.</small> ngOnInit() { this.form = this.fb.group({ ... some other fields SELECTBOX_VALUE: [null,Validators.required] }); 这是我自动编译的过滤器代码,这非常简单 this.form.get('SELECTBOX_VALUE').valueChanges .pipe( startWith(''),map(option => secenek ? this.doFilter(option) : this.options.slice()) ); doFilter (name: string) { return this.myOptions.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); } 解决方法
对于那些可能需要类似方法的人.这是我的解决方案.我根据自己的需要构建了自定义验证规则.
SELECTBOX_VALUE: [null,Validators.compose( [Validators.required,FormCustomValidators.valueSelected(this.myArray)] )] export class FormCustomValidators { static valueSelected(myArray: any[]): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { let selectboxValue = c.value; let pickedOrNot = myArray.filter(alias => alias.name === selectboxValue); if (pickedOrNot.length > 0) { // everything's fine. return no error. therefore it's null. return null; } else { //there's no matching selectboxvalue selected. so return match error. return { 'match': true }; } } } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |