I am still learning Angular, so please forgive me if my question seems a bit basic.
Currently, I have a reactive form that retrieves data for editing from my controller. It seems to be working but there are some bugs present.
Controller:
myForm:any;
expense:any;
constructor(private fb:FormBuilder, private exService: ExpenselistService, private route:ActivatedRoute) {
this.route.queryParams.subscribe(res => {
this.exService.load('expdata', res['token']).subscribe(data => {
this.expense = data;
this.myForm = this.fb.group({
extitle: [this.expense.title, [Validators.required]],
examount: [this.expense.amount, [Validators.required, Validators.min(1)]],
extype: [this.expense.type, [Validators.required]]
});
});
});
}
View:
<form [formGroup]="myForm" (ngSubmit)="doSubmit()">
<div class="form-floating mb-2">
<input type="text" id="title" class="form-control" formControlName="extitle" placeholder="Title">
<label for="title">Title</label>
</div>
<div class="form-floating mb-2">
<input type="number" id="amount" class="form-control" formControlName="examount" placeholder="Amount">
<label for="amount">Amount</label>
</div>
<div class="mb-2 text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" checked formControlName="extype" id="exdebit" value="debit">
<label class="form-check-label" for="exdebit">Debit</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" formControlName="extype" id="excredit" value="credit">
<label class="form-check-label" for="excredit">Credit</label>
</div>
</div>
<div>
<button type="submit" class="btn btn-success py-2 px-3 rounded-5">Save</button>
</div>
</form>
The problem is that the title does not get updated with the value from the controller when an edit is being made. It remains empty, while the amount and type fields function correctly. Strangely, when I console.log the data, it shows the correct values including the title. Even after duplicating the title element without any changes, the duplicate shows the value but the original input field at the top stays empty.
Any assistance on this issue would be highly appreciated.