How to fix form error 'validate' of undefined in 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);
}

user.module

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

how to fix the error: ERROR TypeError: Cannot read property 'validate' of undefined.

What I want is username have a validation which is already exists and username is required.

I added the userNameAsyncValidator, after I added in username then it start causing an error which is the ERROR TypeError: Cannot read property 'validate' of undefined. but when I try to remove the userNameAsyncValidator in username it doesn't have any error.

how to fix it?

ERROR:

    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)```

@SakkeerA done sir. I added the imports also the user.module — Panda
– Panda, Commented Apr 30, 2020 at 4:56
Does this.userNameAsyncValidator validator getting triggered? — Chellappan வ
– Chellappan வ, Commented Apr 30, 2020 at 5:07
@Chellappanவ when I try to run this is the error ERROR TypeError: Cannot read property 'validate' of undefined — Panda
– Panda, Commented Apr 30, 2020 at 5:11
Can you remove this.userNameAsyncValidator from validators array and check? — Chellappan வ
– Chellappan வ, Commented Apr 30, 2020 at 5:25

Chellappan வ · Accepted Answer · 2020-04-30 08:02:21Z

1

Since this.userNameAsyncValidator is async validator add userNameAsyncValidator as third paramter to username control. another change is move your form creation inside ngOnInit or constructo like this:

Try this:

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

edited Apr 30, 2020 at 8:02

answered Apr 30, 2020 at 5:49

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chellappan வ Over a year ago

You are injecting form builder inside contructor and trying to access form builder before it's get created if you move your form creation insde ngOnInit or contrctor it will not throw any error

Panda Over a year ago

I just comment the code on the constructor. inside my constructor is empty. have you fix it?

Panda Over a year ago

stackblitz.com/edit/angular-mcbdzg-ke8gcx?file=src/app/…

Eli · Accepted Answer · 2021-03-15 11:04:20Z

1

In my case, when upgrading to Angular 11. The following validators array was breaking the unit tests:

[, Validators.required]

Notice there is nothing before the comma. Removing the comma fixed the issue for me.

answered Mar 15, 2021 at 11:04

Eli

1,8561 gold badge22 silver badges27 bronze badges

Comments

Raphael · Accepted Answer · 2021-06-15 20:09:55Z

0

In my case i had to remove FormsModule and ReactiveFormModule from imports to work

answered Jun 15, 2021 at 20:09

Raphael

475 bronze badges

Collectives™ on Stack Overflow

How to fix form error 'validate' of undefined in angular

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related