Angular Reactive Form Value Reset Stratergy using RxWeb
Tags: angular, typescript, webdev, rxweb
Published: 2020-04-01 18:25:41

Angular provides initialization of formControl values during init of the component with we want as the input value to be rendered on the HTML DOM whenever the component is loaded

In such cases, whenever we reset the form it clears the input value but what if we want to reset the form to the initialized values. I found a solution to it using `resetForm` method of [@rxweb/reactive-form-validators](https://www.npmjs.com/package/@rxweb/reactive-form-validators)

Before moving towards how to achieve the same, Let's show how it is different from the angular reset 

![RxWeb Reset](https://dev-to-uploads.s3.amazonaws.com/i/eon6pu4thuj1p9fz2qev.gif)

Reset form also needs different strategies if there are nested formGroups and formArrays involved in the form. First we will see the basic reset form. 

### Component :

```js
export class ResetCompleteValidatorComponent implements OnInit {
    userFormGroup: RxFormGroup
    
	constructor(
        private formBuilder: RxFormBuilder, private http: HttpClient )
	{ }

    ngOnInit() {
              
   this.userFormGroup = <RxFormGroup>this.formBuilder.group({
    firstName:[''],
    lastName:[''],
    userName:[''],
    password:['']
        });
    }
     resetForm(){
        this.userFormGroup.resetForm();
       
      }
}
```

### Component Html:
```js
<div>
    <form  [formGroup]="userFormGroup">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" formControlName="firstName" class="form-control"  />
      </div>
  
      <div class="form-group">
        <label>Last Name</label>
        <input type="text" formControlName="lastName" class="form-control"  />
      </div>
 
      <div class="form-group">
        <label>User Name</label>
        <input type="text" formControlName="userName" class="form-control"  />
      </div>
  
       <div class="form-group">
        <label>Password</label>
        <input type="password" formControlName="password" class="form-control"  />
      </div>
  
      <button [disabled]="!userFormGroup.valid"  class="btn btn-primary">Submit</button>
       <button (click)="resetForm()"  class="btn btn-primary">Reset</button>
    </form>
  </div>
```
For forms having nested formGroup and formArrays there are several reset form strategies which the help of setting `ResetFormType` as below:

## ControlsOnly
It will reset the formControls only.

```js 
    resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.ControlsOnly});       
      }
```
## FormGroupsOnly
It will reset the formGroups only

```js
   resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.FormGroupsOnly});
       
      }
```
## FormArraysOnly
It will reset the formArrays only

```js
   resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.FormArraysOnly});
      }
```

## ControlsAndFormGroupsOnly
It will reset the formGroups and formGroups

```js
  resetForm(){        
 this.userFormGroup.resetForm({resetType:ResetFormType.ControlsAndFormGroupsOnly});
       
      }
```

## DefinedPropsOnly
It will reset the defined properties

```js
resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.DefinedPropsOnly,value:{ firstName: 'John' }});
       
      }
```

## All
It will reset all including formGroups,formGroups and formArrays

```js
resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.All});       
      }
```

## with
If you want some specific formControls or formArrays to revert, you need to set `with` and specify the formControl or formArray name.

```js
 resetForm(){
        this.userFormGroup.resetForm({ with: ["firstName","address.areaName"] });
       
      }
```

## value
If you want to reset a particular property `value` property can be used.

```js
  resetForm(){
        this.userFormGroup.resetForm({ value: { firstName: 'John' } });
       
      }
```

Reset forms provides these reset form types to initialize the formControl value whenever complex forms are involved. Here is the [complete](https://stackblitz.com/angular/vjylrnoxved?file=src%2Fapp%2Freset-complete.component.ts) example