How to use Angular Reactive Form to add/insert, update or CRUD operation of data by using setValue or setPatch
Given simple example to use Angular popular Reactive form for CRUD operation.
In .html file, created Reactive form by using [formGroup]=”myform”
Used formControlName to specify name of field
If there is any group like address, where it will have city and country then we use Reactive form property of
formGroupName. So in below html we have used formGroupName=”address” to define group.
<div class="col-md-4"> <form novalidate (ngSubmit)="onSubmit(myform.value)" [formGroup]="myform"> <fieldset [disabled]="steps > 1"> <h3>My Details</h3> <hr> <div class="form-group"> <label>Full Name</label> <input type="text" class="form-control" formControlName="name"> </div> <div formGroupName="address"> <div class="form-group"> <label>City</label> <input type="text" class="form-control" formControlName="city"> </div> <div class="form-group"> <label>Country</label> <input type="text" class="form-control" formControlName="country"> </div> </div> <button type="submit" class="btn btn-primary" [disabled]="myform.invalid" (click)="onFormSubmit(myform.value, action)>Next</button> </fieldset> </form> </div>
In component.ts
export class FormsComponent implements OnInit {
myform: FormGroup;
actionButton;
action = null;
}
constructor(
public fb: FormBuilder ,
public employeeService : FormserviceService
) { }
ngOnInit() {
this.actionButton = 'Submit';
// Build and Validate Reactive form
this.myform = this.fb.group({
name: ['', Validators.required],
address: this.fb.group({
city: ['', Validators.required],
country: ['', Validators.required]
})
});
}
Function call on form submit with action parameter
action is null to submit data
action is update to update data
onFormSubmit(form1, action){
this.myData = form1;
this.formData = Object.assign(form1);
// Called employeeService to insert or update data
if(this.action === 'update') {
this.employeeService.updateEmployee(this.formData);
this.msgs.push({severity:'success', summary:'Thank You', detail:'User has been updated successfully.'});
} else {
this.employeeService.insertEmployee(this.formData);
this.msgs.push({severity:'success', summary:'Thank You', detail:'User has been registered successfully.'});
}
this.resetForm();
}
If edit button clicked then action will set to ‘update’ and we will use setValue here to set values to form
editForm(items, index) {
this.actionButton = 'Edit';
this.action = 'update';
this.myform.setValue({
name: items.name,
address: {
city: items.address.city,
country: items.address.country
}
});
}
This will help you to undestand Reactive form validation and how to add/edit data by using Angular Reactive form