Angular 6材质自动完成验证

Question

我们正在使用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);
}

Answer 1

对于那些可能需要类似方法的人。这是我的解决方案。我已经根据需要建立了自定义验证规则。

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 };
      }
    }
  }
}

Answer 2

Angular Material Autocomplete有两种情况，可能需要根据所选选项列表进行验证：

1. 字符串数组- 建议选项在字符串数组中定义
2. 对象数组- 建议的选项是在对象数组上定义的对象属性（在这种情况下，displayWith将使用 Input。）

** Stackblitz 演示**

验证字符串数组中的选项

为了autocomplete针对字符串选项数组进行验证，验证器可以接受选项数组并检查是否包含控制值。

function autocompleteStringValidator(validOptions: Array<string>): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (validOptions.indexOf(control.value) !== -1) {
      return null  /* valid option selected */
    }
    return { 'invalidAutocompleteString': { value: control.value } }
  }
}

验证器可以FormControl与其他内置验证器一起添加到 a 中，例如Validators.required：

public autocompleteControl = new FormControl('', 
      { validators: [autocompleteStringValidator(this.options), Validators.required] })

验证对象数组中的选项

为了autocomplete针对一组对象选项进行验证，验证器可以利用这样一个事实，即control.value只有在没有选择string有效Object选项时才会是 a 。

function autocompleteObjectValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (typeof control.value === 'string') {
      return { 'invalidAutocompleteObject': { value: control.value } }
    }
    return null  /* valid option selected */
  }
}