I need assistance with loading an array of saved templates to be used as options in an ion-select. When an option is chosen, the form should automatically update based on the selected template.
Below is the structure of my templates:
export interface Template {
...
destination: string; //iban
recipient: string;
amount: number;
reference: string;
}
Here is the code snippet for my ion-select component:
<ion-item>
<ion-label>Load template</ion-label>
<ion-select (change)="this.transactionForm.patchValue({recipient: template.recipient, destination: template.destination, amount: template.amount, reference: template.reference})">
<ion-option *ngFor = "let template of templates;">
{{template.reference}}
</ion-option>
</ion-select>
</ion-item>
The goal is to populate the select menu with saved templates and dynamically update the form fields upon selection.
This is how I set up the form in the constructor of the .ts file:
constructor( public formBuilder: FormBuilder, public templateServicerino: TemplateService) {
this.templateServicerino.createTemplate("DE365849", "John Johnson", 420, "Testerino");
this.templates = this.templateServicerino.getAllTemplates();
this.transactionForm = this.formBuilder.group({
recipient: [''],
destination: [''],
amount: ['0'],
reference: ['']
});
However, when testing, I encounter an issue where the form does not get updated after selecting a template. My IDE reports that the field "template" is unresolved.
Your assistance is greatly appreciated. Thank you!