Angular 5 reactive forms validators error

Question

I have been stuck at this silly angular 5 reactive forms error which i am not able to get rid of. While adding the validation message block in html, I am getting the error

"Cannot read property 'invalid' of undefined"

which is weird as there is a form control element with the same name and I am able to access the value of that feild. Below is the code

HTML file

 <form [formGroup]='signUpForm'>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" formControlName='password'>
          <div *ngIf="password.invalid && (password.dirty || password.touched)"
 class="alert alert-danger">
          <div *ngIf="password.errors.required">
            Name is required.
          </div>
          </div>
        </div>
      </div>
    </div>
  </form>

ts code

signUpForm: FormGroup;
this.signUpForm = new FormGroup({
  username:new FormControl('',Validators.required),
  email:new FormControl('',[Validators.required]),
  password:new FormControl('',Validators.required),
})

Please help. Thanks in advance

Why does some field have straight brackets meanwhile others don't. It could cause some problem. — Sergey
– Sergey, Commented Jun 2, 2018 at 16:17

Vishal Maru · Accepted Answer · 2018-06-02 16:22:54Z

1

Try This Code.

  <div *ngIf="signUpForm.controls['password'].invalid && (signUpForm.controls['password'].dirty || signUpForm.controls['password'].touched)"
class="alert alert-danger">

    <div *ngIf="signUpForm.get('password').hasError('required')">
       Name is required.
    </div>
</div>

answered Jun 2, 2018 at 16:22

Vishal Maru

5092 silver badges8 bronze badges

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

2 Comments

Vipin Over a year ago

Thanks missed that

Vishal Maru Over a year ago

Great, Happy Coding.

Ashish Ranjan · Accepted Answer · 2018-06-02 16:30:19Z

Where do you initialize the form?? If you do it in ngOnInit(), you should not be facing that problem.

If you are initializing the form under any other custom method of yours then you can use something like:

Use the safe navigation operator ?. This checks whether the first operator results to true or not. When the view is rendered it might be possible that the control is not initialized yet. So suppose if the component variable password is not defined when your view is rendered and you try to access a property invalid of password(which is undefined), you will get the error you get now..

for example:

 <div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger">

So your actual view could be like:

 <form [formGroup]='signUpForm'>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName='password'>
      <div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger">
      <div *ngIf="password?.errors?.required">
        Name is required.
      </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Angular 5 reactive forms validators error

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related