Form Builder - Cannot Read Property 'Get' of Undefined, Issue With Validators

Cannot read property of undefined Reactive Forms

this is undefined in your function, therefore you cannot reference it.

What I would add a sub formgroup, that would track both the value of password and confirm password, but if you want to go this route, modify your code as such:

// ...
// see the brackets also around the validators! No need to use Validators.compose
cpassword: ['', [Validators.required, passwordMatch]]
// ...

Then you would access the form group with parent. Also you need to return either null (valid) or an error:

function passwordMatch(input: FormControl) {
  if (input.parent) {
    let passwordInput = input.parent.get('password');
    if (passwordInput.value !== input.value) {
      return { notequal: true }
    }
    else {
      return null;
    }
  }
}

DEMO: StackBlitz

But with this, we need to remember, if user modifies password field after modifying the confirmpassword and the passwords do not match, the form will still be considered valid. Here's a way to avoid this: password and confirm password field validation angular2 reactive forms

Angular-Reactive-Forms, getting error, Cannot read property 'get' of undefined

Is it possible it's a timing issue? Are you binding to idNumber on the form somewhere? Maybe it's this:

<mat-error *ngIf="idNumber.invalid && idNumber.touched">

It may be that the binding is occurring before the form is initialized.

Though I just tried something similar in my code and it does not throw an exception in my example (though I'm not using material design). So it must be something specific to your scenario (hence the request for a stackblitz.)

You could try this:

get idNumber() {
    if (this.identificationForm) {
      return this.identificationForm.get('idNumber') as FormControl;
    }
}

Angular Reactive Forms - Validation Errors - Cannot read property of undefined or null

use safe navigation operator ?. It checks whether the variable is null or undefined so that our template won't try to select a property of something falsy.

In your case use it in your template where you are trying to access property of a object using . operator , for example : *ngIf="isSubmitted && fControls?.home?.errors"

Note : you shouldn't be using the same with model binding [(ngModel)]="employee?.name" is wrong

FormGroup ERROR TypeError: Cannot read property 'get' of undefined

You did was everything right, but you need to build a FormBuilder too.

Kindly follow my method of getting data from a form.

html:

<form [formGroup]="WordpressForm">

 <div class="form-group">
   <mat-form-field class="example-full-width">
     <input matInput placeholder="Title" [(ngModel)]='title' formControlName='title'>
   </mat-form-field>
   <div>        
   <button (click)="save()">Save</button>
  </div>
 </div>
</form>

ts:

constructor(private fb: FormBuilder) {}

WordpressForm = this.fb.group({
  title: ['', [Validators.required]]
});

getTitle() {
 return this.WordpressForm.get('title');
}

save() {
 const template_Title = this.title;
 console.log(template_Title);
}

Reactive Form (Cannot Read property error of null)

Looking at your code, the possible reason for this error seems like you are accessing the firstName formcontrol when it is not defined in the loginForm.

Reactive nesting forms. Getting error cannot read property 'hasError' of undefined

You have a FormGroup in a FormGroup so:

*ngIf="dataControls.user.controls.firstname.hasError('required')"

In typescript, you will need to cast (to avoid syntax error) :

(<FormGroup>this.dataControls.user).controls.firstname.hasError('required') 

EDIT:

There is a better way, typescript side:

this.dataControls.user.get('firstname').hasError('required');

---

Related Topics