If you have a list of records and now you want a edit screen to edit and update the record then you can do it using following steps:
1- Import forms module in component
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
2- Then declare variables of form builder and form group
public testform: FormGroup;
constructor(
public share: ShareService,
public fb: FormBuilder
) { }
3- Create a form
ngOnInit(){
this.testform = this.fb.group({
id: [''],
first_name: [''],
last_name: [''],
phone: ['']
});
}
4- Then on click of edit set form element values using patchValue and display it
showForm(data){
this.formData = data;
this.testform.patchValue({
id:data.id,
first_name:data.first_name,
last_name:data.last_name,
phone:data.phone
});
}
5- On component html show data as below
These are a very simple and easy steps to edit and display form data and when you submit, it will be accessible as below
updateUser(testform){
let userData:any = {};
userData.id = testform.value.id;
userData.first_name = testform.value.first_name;
userData.last_name = testform.value.last_name;
userData.phone = testform.value.phone;
this.share.updateUserData(userData).subscribe((res)=>{
console.log(res);
});
}
Here this.share.updateUserData is a service to update record which communicate with nodejs through API.