javascript - 如何修复 Angular 中未定义的形式错误 'validate'

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

user.module

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

如何修复错误:错误 TypeError:无法读取未定义的属性“验证”。

我想要的是用户名有一个验证，该验证已经存在并且用户名是必需的。

我添加了 userNameAsyncValidator，在添加用户名后，它开始导致错误，即错误类型错误:无法读取未定义的属性“验证”。但是当我尝试删除用户名中的 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);
    }