Angular 6 : Cannot read property 'reset' of undefined

Question

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 :

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>

Answer 1

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

Answer 2

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