How to update a form based on a selected option?

Ionic Framework ionic-v3
#1

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
Capture.PNG626×508 10.5 KB

Thank you in advance for your help

#2

Manual change detection triggering might be needed here.

#3

Hello, thank you for your suggestion but sadly it didn’t work.
Here are the changes I tried:

<ion-item>
               <ion-label>Load template</ion-label>
               <ion-select [(ngModel)]="selectObj" (ionChange)="onSelectChange($event, selectObj)">
                 <ion-option *ngFor = "let template of templates;">
                   {{template.reference}}
                 </ion-option>
               </ion-select>
             </ion-item>

and for the TS:

onSelectChange(selected:any,selectObj){
    console.log(selected,selectObj);

    this.transactionForm.patchValue({recipient: selectObj.recipient, destination:
      selectObj.destination, amount: selectObj.amount, reference: selectObj.reference});
    this._cdr.detectChanges();
  }

Then I used a ChangeDetectorRef like you do in your solution and when checking the console logs the template is in fact loaded but the form is not updated

#4

Is there a publicly accessible source repository that would allow people to replicate your situation?

#5

Hello, after gathering information from different sources I came to this solution:

<ion-item>
               <ion-label class="loader">Load template</ion-label>
               <ion-select [(ngModel)]="selectObj" (ionChange)="onSelectChange($event, selectObj)">
                 <ion-option *ngFor = "let template of templates;">
                   {{template.reference}}
                 </ion-option>
               </ion-select>
             </ion-item>

  onSelectChange(selected:any,selectObj){
   let referencerino: string;
   let amounterino: number;
   let destinationerino: string;
   let recipienterino: string;
    this.templates.forEach(function (value) {
      if( selectObj.toString().indexOf(value.reference)>-1) {
        referencerino = value.reference;
        amounterino = value.amount;
        recipienterino = value.recipient;
        destinationerino = value.destination;
      }
    });
    this.transactionForm.controls['recipient'].setValue(recipienterino);
    this.transactionForm.controls['destination'].setValue(destinationerino);
    this.transactionForm.controls['amount'].setValue(amounterino);
    this.transactionForm.controls['reference'].setValue(referencerino);
    this._cdr.detectChanges();

  }

Thank you very much for your help