CODEWITHSUNDEEP
angulartypescript
user16584951
user16584951

Reputation:

How to reset formgroup in angular?

How do we reset form values in angular , for example I wanna reset the values of createUserForm but it should not include or reset the data I have added on addControl. Thanks

I tried this.createUserForm.reset(); but it reset including the add controls I added which I dont want. Only the fields on createUserForm

#Code

  createUserForm = new FormGroup({
    emailAddress: new FormControl(),
    firstName: new FormControl(),
    lastName: new FormControl(),
    phoneNumber:  new FormControl(),
    companyName: new FormControl(),
    title: new FormControl(),
    roleId: new FormControl(),
  });

#code 2

 getAssociatedAccount() {
    this.isInProgress = true;
    this.userService
      .getUserProfile(this.authService.authUser.nameid, this.accountId)
      .pipe(finalize(() => (this.isInProgress = false)))
      .subscribe({
        next: (res: any) => {
          if (res.isSuccess) {
            this.associatedAccount = res.data.associatedAccount;
            this.createUserForm.addControl(
              'associatedAccount',
              new FormControl(this.associatedAccount)
            );
            this.createUserForm.addControl(
              'accountId',
              new FormControl(this.accountId)
            );
          }
        },
        error: (err) => noop,
        complete: () => noop,
      });
  }

Upvotes: 2

Views: 5127

Answers (2)

Dako patel
Dako patel

Reputation: 920

Use the reset() method for reset angular reactiveForm.

Example

in your case just use this method as below.

this.createUserForm.reset();

More Details...

Upvotes: 4

Devang Patel
Devang Patel

Reputation: 1843

If you see the documentation here it is mentioned that you can pass the value as an argument (https://angular.io/api/forms/FormGroup#reset)

So in your case, you can do something like this while reset :

this.createUserForm.reset({
    emailAddress: '',
    firstName: '',
    lastName: '',
    phoneNumber:  '',
    companyName: '',
    title: '',
    roleId: '',
    associatedAccount: this.associatedAccount,
    accountId: this.accountId
});

Upvotes: 5

Related Questions