javascript - 如何根据所选选项更新表单？

Question

我正在尝试加载一组已保存的模板，以便能够从它们中选择作为 ionic 选择中的选项，并根据选择的选项更新表单。

这就是我的模板的组成方式:

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

这就是我的 ionic 选择的样子:

 <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 说字段"template"未解析

预先感谢您的帮助

Answer 1

您试图访问元素范围之外的模板引用。更改方法不是 ionic 方法。因此请参阅此链接 https://github.com/ionic-team/ionic/issues/7807

更多引用检查 ionic 文档: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})
 }