Angular 5 - Updating Model from Form - forms

Question

i'm new to Angular 5 and i'm trying to make a CRUD.
i'm struggling with the "update" part.
what i'd want to do is, in my form, getting back the data of the Model to fill the input text with, then, when i click on the update button, updating the all model.
I tried so many thing from tuts and forums that i'm completly lost now. So here is what i have.
html :
<form [formGroup]="policyForm" (ngSubmit)="update()">
<mat-form-field>
<input formControlName="policyName">
</mat-form-field>
... Many other inputs
<button type="submit" color="primary">Update</button>
</form>
component :
export class PolicyUpdateComponent implements OnInit {
policyModel: PolicyModel;
policyId = +this.route.snapshot.paramMap.get('id');
policyForm: FormGroup;
formBuilder: FormBuilder;
constructor(
private policyService: PolicyService,
private route: ActivatedRoute,
private router: Router,
private fb: FormBuilder
) {
this.policyService.get(this.policyId)
.subscribe(policy => this.policyModel = policy);
}
ngOnInit() {
this.createForm();
}
createForm() {
this.policyForm = this.fb.group({
policyName: [this.policyModel.name, Validators.required]
});
}
update(id: number) {
id = this.policyId;
this.policyModel = <PolicyModel>this.policyForm.value;
this.policyService.update(id, this.policyModel).subscribe(res => {
this.router.navigate(['/policies', id, 'get']);
}, (e) => {
console.log(e);
}
);
}
}
service :
/**
* Update a policy with new parameters
* #param pm PolicyModel
*/
update(id: number, pm: PolicyModel): Observable<any> {
return this.http.put<PolicyModel>(`${environment.baseApiUrl}/${environment.apiVersion}/policies/${id}`, {pm});
}
any help would be nice.. thanks guys!

Answer 1

Change the code according to this.
<form [formGroup]="policyForm" >
<mat-form-field>
<input formControlName="policyName">
</mat-form-field>
<button color="primary" (click)="update()">Update</button>
</form>
Add subscription to detect form changes.
ngOnInit() {
this.createForm();
this.policyForm.valueChanges.subscribe(
(data) => {
if (JSON.stringify(data) !== JSON.stringify({})) {
this.policyModel.name = data.policyName;
}
});
}
createForm() {
this.policyForm = this.fb.group({
policyName: [this.policyModel.name]
});
}
update(id) {
this.policyModel.id = id;
id = this.policyId;
this.policyService.update(id, this.policyModel)//.subscribe(res => {
this.router.navigate(['/policies', id, 'get']);
}, (e) => {
console.log(e);
}
);
}
Sample code : https://stackblitz.com/edit/angular-wwt91u