如何使用 Angular Autocomplete 驗證輸入

Question

我需要幫助。

我正在使用角材料。

我的問題是關於使用自動完成時的 mat-error 顯示/關閉。

在我的代碼中，我有一個帶有自動完成輸入的表單。 輸入調用 JSON 對象作為響應。

{ name: 'Paul', id: 1 }

此時，需要在“選擇”選項上選擇時顯示[名稱]，在輸入中選擇。 並將選項值設置為 [id]。

沒問題，我已經完成了。

[displayWith]="displayFn"

沒關系，一切正常，但我不知道如何將 [id] 驗證為數字。 每次我嘗試時，只需將輸入 [name] 驗證為字符串。

為什么我需要那個？ 因此，我將僅使用 [id] 來構建表單對象 [ownerId]。

 <input id="ownerId" type="text" matInput formControlName="ownerId" [matAutocomplete]="auto" placeholder="Digite para pesquisar..." name="doNotAutocomplete" autocomplete="doNotAutoComplete" required> <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of owners" [value]="option"> {{option.name}} </mat-option> </mat-autocomplete> <mat-error>Selecione ou cadastre um novo proprietário.</mat-error>

 // Set display owner name on input form - id on value displayFn(owner: Owner): any { return owner && owner.name ? owner.name : ''; }

 // Horizontal Stepper form steps this.formGroup = this.formBuilder.group({ formArray: this.formBuilder.array([ this.formBuilder.group({ ownerId: ['', [Validators.required], code: ['', Validators.required], agent: ['', Validators.required] }),

當從輸入中選擇名稱時，mat-error 會設置輸入 INVALID。

非常感謝您的幫助。

Answer 1

我的解決方案，

在 Stackoverflow 中，我找到了一種解決方案：Angular Material： 如何根據建議的選項驗證自動完成？

需要的很簡單，我必須創建和自定義驗證器函數，例如：

function ownerIdValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (typeof control.value === 'string') {
      return { 'invalidAutocompleteObject': { value: control.value } };
    }

    return null;  /* valid option selected */
  };
}

並在此處添加：

this.formGroup = this.formBuilder.group({
  formArray: this.formBuilder.array([
    this.formBuilder.group({
       ownerId: ['', [Validators.required, ownerIdValidator()]],

我希望它可以幫助別人。