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
Before moving towards how to achieve the same, Let's show how it is different from the angular reset
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 :
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:
<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.
resetForm(){
this.userFormGroup.resetForm({resetType:ResetFormType.ControlsOnly});
}
FormGroupsOnly
It will reset the formGroups only
resetForm(){
this.userFormGroup.resetForm({resetType:ResetFormType.FormGroupsOnly});
}
FormArraysOnly
It will reset the formArrays only
resetForm(){
this.userFormGroup.resetForm({resetType:ResetFormType.FormArraysOnly});
}
ControlsAndFormGroupsOnly
It will reset the formGroups and formGroups
resetForm(){
this.userFormGroup.resetForm({resetType:ResetFormType.ControlsAndFormGroupsOnly});
}
DefinedPropsOnly
It will reset the defined properties
resetForm(){
this.userFormGroup.resetForm({resetType:ResetFormType.DefinedPropsOnly,value:{ firstName: 'John' }});
}
All
It will reset all including formGroups,formGroups and formArrays
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.
resetForm(){
this.userFormGroup.resetForm({ with: ["firstName","address.areaName"] });
}
value
If you want to reset a particular property value property can be used.
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 example
Top comments (0)