CODEWITHSUNDEEP
formsangularangular2-formsangular-reactive-forms
Scottie
Scottie

Reputation: 11308

Angular 2 FormControl.reset() doesn't work, but .resetForm() does (but typescript error)

In my Angular 2 form, I have the following typescript:

export class UserEditComponent implements OnChanges {
    @Input() userModel: IUserModel;
    @Output() onSave: EventEmitter<IUserModel> = new EventEmitter<IUserModel>();

    @ViewChild("userEditForm") userEditForm: FormControl;

    private userNameIsValid = true;

    constructor(private httpService: HttpService) {
    }

    ngOnChanges (changes: SimpleChanges) {
        this.userEditForm.resetForm();
        console.log(this.userEditForm);
    }

    ....
}

and template html:

<form class="form-horizontal" #userEditForm="ngForm" (ngSubmit)="onSaveUser()" novalidate>
    ....
</form>

I tried using the .reset() function, but it did nothing. The .resetForm actually resets the _submitted property of the form from true back to false, however, it gives me a TypeScript error Property resetForm does not exist on type FormControl.

First, is resetForm an actual function that works? I can't seem to find any documentation for it... but it works and .reset() doesn't.

Second, how can I get rid of this TypeScript error? Do I need to update my typings for Angular 2?

Upvotes: 0

Views: 2271

Answers (3)

Ahmad Salem
Ahmad Salem

Reputation: 1

Add import:

import { NgForm } from "@angular/forms";

ngOnChanges (changes: SimpleChanges) {
    /** add this **/
    form.reset();
    console.log(this.userEditForm);
}

Upvotes: 0

developer033
developer033

Reputation: 24864

Declare userEditForm as NgFormlike this: 

@ViewChild("userEditForm") userEditForm: NgForm;

Now you can access .resetForm() method.

Upvotes: 2

Mani S
Mani S

Reputation: 2561

You should import NgForm from @angular/forms and try this.

OnClear(userEditForm: NgForm) {
  userEditForm.reset();
 }

Upvotes: 1

Related Questions