How to update a form based on a selected option?

@sanesma93 wrote:

I am trying to load an array of saved templates to be able to select from them as options in an ion-select and based on which option is chosen the form should be updated.

This is how my templates are composed:

 export interface Template {
  destination: string; //iban
  recipient: string;
  amount: number;
  reference: string;
}

And this is how my ion-select looks:

<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 idea is to load the saved templates and choose one in the list so that the values in the form I’m filling get updated once you make your choice.

This is how I initialise 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:  ['']
        });

When I test this out I do get an option called “Testerino” when I click the select but once I press OK the form is not updated. My IDE says the field “template” in is unresolved

Capture.PNG626×508 10.5 KB

Thank you in advance for your help

Posts: 1

Participants: 1

Read full topic