如何修復 angular 中未定義的表單錯誤“驗證”

Question

HTML

 <form nz-form [formGroup]="formGroup">
        <nz-form-item>
          <nz-form-label nzFor="username">
            <span translate>Username</span>
          </nz-form-label>
          <nz-form-control nzHasFeedback>
            <input nz-input name="username" type="text" id="username" formControlName="username"
              [placeholder]="'Enter Username' | translate" (keydown.space)="$event.preventDefault()" />
            <nz-form-explain *ngIf="
              (formGroup.get('username')?.dirty && formGroup.get('username')?.errors) ||
              formGroup.get('username')?.pending
            ">
              <ng-container *ngIf="formGroup.get('username')?.hasError('required')">
                Username is required
              </ng-container>
              <ng-container *ngIf="formGroup.get('username')?.hasError('duplicated')">
                Username already exists. Please try different username
              </ng-container>
              <ng-container *ngIf="formGroup.get('username')?.pending">
                Validating...
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
</form>

***TS****

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



 userNameAsyncValidator = (control: FormControl) =>
    new Observable((observer: Observer<ValidationErrors | null>) => {
      setTimeout(() => {
        if (control.value === 'JasonWood') {
          observer.next({ error: true, duplicated: true });
        } else {
          observer.next(null);
        }
        observer.complete();
      }, 1000);
    });

  createFormGroup(data?: Partial<User>) {
    const dataObj = {
      id: [data && data.id],
      username: [
        {
          value: (data && data.username) || '',
          disabled: data instanceof User
        },
        [Validators.required], 
[this.userNameAsyncValidator]
      ]
    }

    return this.fb.group(dataObj);
}

用戶模塊

imports: [
    CommonModule,
    UsersRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    PageTableFilterModule,
    CellRenderersModule,
    NzDrawerModule,
    NzFormModule,
    NzInputModule,
    NzSelectModule,
    NzDividerModule
    ]

如何修復錯誤： ERROR TypeError: Cannot read property 'validate' of undefined 。

我想要的是用戶名有一個already exists的驗證並且username is required 。

我添加了 userNameAsyncValidator，在添加用戶名之后它開始導致錯誤，即ERROR TypeError: Cannot read property 'validate' of undefined 。 但是當我嘗試刪除用戶名中的 userNameAsyncValidator 時，它沒有任何錯誤。

如何解決？

錯誤：

    at normalizeAsyncValidator (forms.js:930)
    at Array.map (<anonymous>)
    at composeAsyncValidators (forms.js:2150)
    at coerceToAsyncValidator (forms.js:2501)
    at new FormControl (forms.js:3236)
    at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.control (forms.js:6462)
    at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder._createControl (forms.js:6502)
    at forms.js:6488
    at Array.forEach (<anonymous>)
    at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder._reduceControls (forms.js:6487)```

Answer 1

由於 this.userNameAsyncValidator 是異步驗證器，因此將 userNameAsyncValidator 作為第三個參數添加到用戶名控件。 另一個變化是將您的表單創建移動到 ngOnInit 或這樣的構造中：

嘗試這個：

 constructor(private fb: FormBuilder) {
    this.validateForm = this.createFormGroup();
  }

 createFormGroup(data?: Partial<User>) {
        const dataObj = {
          id: [data && data.id],
          username: [
            {
              value: (data && data.username) || '',
              disabled: data instanceof User
            },
            [Validators.required],
            [this.userNameAsyncValidator]
          ]
        }

        return this.fb.group(dataObj);
    }

Answer 2

就我而言，當升級到 Angular 11 時。以下驗證器數組破壞了單元測試：

[, Validators.required]

請注意，逗號前沒有任何內容。 刪除逗號為我解決了這個問題。

Answer 3

在我的情況下，我必須從導入中刪除 FormsModule 和 ReactiveFormModule 才能工作