Как обновить форму на основе выбранной опции?

Question

Я пытаюсь загрузить массив сохраненных шаблонов, чтобы иметь возможность выбирать из них в качестве опций в ion-select, и в зависимости от того, какой вариант выбран, форму следует обновить.

Вот как создаются мои шаблоны:

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

А вот так выглядит мой ионный селектор:

 <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>

Идея состоит в том, чтобы загрузить сохраненные шаблоны и выбрать один из них в списке, чтобы значения в форме, которую я заполняю, обновлялись, как только вы сделаете свой выбор.

Вот как я инициализирую форму в конструкторе файла .ts:

 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:  ['']
        });

Когда я проверяю это, я получаю опцию, называемую «Testerino», когда я нажимаю кнопку выбора, но когда я нажимаю ОК, форма не обновляется. Моя IDE говорит, что поле "шаблон" в неразрешенном

Заранее благодарю за помощь

Answer 1

Вы пытаетесь получить доступ к ссылке на шаблон вне области действия элемента. метод изменения не является ионным методом. см. эту ссылку https://github.com/ionic-team/ionic/issues/7807

Больше справочной проверки ионных документов: https://ionicframework.com/docs/api/components/select/Select/

<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>

предыдущий код в компоненте после метода конструктора.

 onSelectChange(selected:any,selectObj){
  console.log(selected,selectObj)
  this.transactionForm.patchValue({recipient: selectObj.recipient, destination: 
  selectObj.destination, amount: selectObj.amount, reference: selectObj.reference})
 }