Angular 6 : Cannot read property 'reset' of undefined

user_10278663 0
Viewed 11538

i am receiving an error while using reset in my method. i am trying to reset a form after saving changes but i am receiving this error :

enter image description here

This is my method :

  @ViewChild('editFrom')
  editForm: NgForm;
  constructor(
    private route: ActivatedRoute,
    private alertify: AlertifyService
  ) {}

  ngOnInit() {

  }
  updateUser() {
    console.log(this.user);
    this.alertify.success('Profile Updated Successfully');
    this.editForm.reset(this.user);
  }
}

This Html form : 

<form #editForm="ngForm" id="editForm" (ngSubmit)="updateUser()">
              <h4>Description</h4>
              <textarea name="introduction" rows="6" class="form-control" [(ngModel)]="user.introduction"></textarea>
              <h4>Looking For</h4>
              <textarea name="lookingFor" rows="6" class="form-control" [(ngModel)]="user.lookingFor"></textarea>
              <h4>Interest </h4>
              <textarea name="interests" rows="6" class="form-control" [(ngModel)]="user.interest"></textarea>
              <h4>Location Details:</h4>
              <div class="form-inline">
                <label for="city">City:</label>
                <input class="form-control" type="text" name="city" [(ngModel)]="user.city">
                <label for="country">Country:</label>
                <input class="form-control" type="text" name="country" [(ngModel)]="user.country">
              </div>
            </form>
angular6 angular typescript
3 Answers

The problem is you used <form #editForm="ngForm" id="editForm" (ngSubmit)="updateUser()"> in HTML File

Coming to .ts file you are using @ViewChild('editFrom') and it should be @ViewChild('editForm')

user_77377770

I don't really think that you need to use ViewChild to get a hold of the editForm. Since you can pass it as an Argument to the updateUser method.

Pass the form to the method:

<form #editForm="ngForm" id="editForm" (ngSubmit)="updateUser(editForm)">

Then receive it in updateUser method:

updateUser(editForm) {
  console.log(this.user);
  this.alertify.success('Profile Updated Successfully');
  editForm.reset(this.user);
}
user_26222920

If you are using viewChild to hold the variable then the problem is here:

@ViewChild('captchaRef') recaptchaRef: **ElementRef**;

Do not reference a variable with ElementRef;

Do this => in your ts.file

import {RecaptchaComponent} from 'ng-recaptcha';  
@ViewChild('captchaRef') recaptchaRef: RecaptchaComponent;

this.recaptchaRef.reset();
user_142067370
Related