I´m building up an Angular basic CRUD app for try new things, but wish to know why this is happening.
I´m trying to get the "post" data and I do from a service, this is working fine, the problem is when I´m setting up the form, show the rest of the values, but not the user ID.
This is the code:
HTML
<div class="container">
<h1 class="hidden__content">Modify register</h1>
<div class="row new__register__form__wrapper mt-5">
<h3 class="mb-5">Modify register</h3>
<form [formGroup]="editRegisterForm" (ngSubmit)="editRegister()">
<div class="form-group mb-3">
<input type="text" class="form-control" id="userIdInput" formControlName="user" readonly>
</div>
<div class="form-group mb-3">
<textarea class="form-control" id="titleInput" cols="30" rows="3" placeholder="Write here the title of your post" formControlName="title"></textarea>
</div>
<div class="form-group form-check mb-3">
<select class="form-select" name="completedSelect" id="comletedSelect" formControlName="completed">
<option value="default" hidden>Choose an option</option>
<option value="completed">Completed</option>
<option value="no completed">Not completed</option>
</select>
</div>
<button type="submit" class="btn btn-outline-primary new__register__form__submit">Update register</button>
</form>
</div>
</div>
TypeScript
ngOnInit(): void {
this.registerId = this.route.snapshot.paramMap.get('id');
this.todosService.getAllRegistersById(this.registerId).subscribe((res: any) => {
this.editRegisterForm = this.initEditForm(res);
});
}
initEditForm(response: any){
const { user, title, completed } = response;
let status;
completed === true? (status = 'completed'): (status = 'no completed');
return this.fb.group({
user: [user, [Validators.required]],
title: [title, [Validators.required, Validators.maxLength(199)]],
completed: [status, [Validators.required]]
});
}
Try injecting ChangeDetectorRef in constructor and run markforcheck() after form is initialized.
I would suggest a different approach.
editRegisterForm, but instead inside initEditForm, you can do the following: this.editRegisterForm.get('user').setValue(yourUserValue);
this.editRegisterForm.get('title').setValue(yourTitleValue);
this.editRegisterForm.get('completed').setValue(yourCompletedValue);
This way you're going to update your FormControl's values. Otherwise your approach is probably causing an issue with change detection and I don't see a point to reassign the value of your FormGroup, when you're just trying to update your field's values and there's an API defined for that.