Angular 如何更改离子3中的输入值

我是爱奥尼亚的新手，需要帮助

我有一个包含表单的页面，我从另一个页面接收一个参数，并将其注入表单中

现在我可以更改输入的值，但是当我提交表单时，值总是未定义的

ts代码

export class QpayPage {
  private qpay_form: FormGroup;
  id;
  merchant_id;
  constructor(public navParams: NavParams, private iab: InAppBrowser, public nav: NavController, private formBuilder: FormBuilder, public popoverCtrl: PopoverController, public fetchphpProvider: FetchphpProvider) {

  this.id = this.navParams.get('id');
  this.qpay_form = this.formBuilder.group({
    merchant_id: [this.id, Validators.required],
    amount: ['', Validators.required],
    note: [''],
  });
 }
}

Html代码

<form #form="ngForm" [formGroup]="qpay_form" (ngSubmit)="submitQpay(form)">
    <ion-item>
      <ion-label>Merchant ID</ion-label>
      <ion-input type="number" required name="merchant_id"  [(ngModel)]="qpay_form.merchant_id" ngControl="merchant_id" formControlName="merchant_id"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>Amount</ion-label>
        <ion-input type="number" required name="amount" [(ngModel)]="qpay_form.amount" ngControl="amount" formControlName="amount"></ion-input>
      </ion-item>
    <ion-item>
      <ion-label>Note</ion-label>
      <ion-textarea name="note" [(ngModel)]="qpay_form.note" ngControl="note" formControlName="note"></ion-textarea>
    </ion-item>
    <button ion-button color="secondary" type="submit" block>Pay Now</button>
  </form>

---

如果不显示完整的.ts代码，很难判断，但似乎没有传递值。因此，您需要更改：

（ngSubmit）=“submitQpay（表单）”

到

（ngSubmit）=“submitQpay（qpay_form.value）”

然后在.ts文件中

submitQpay(formValue) {
   // code to handle value
}

---

回答我的问题。我删除了整个表单组，并将其替换为一个读取输入值的函数

Html代码：

<ion-item>
  <ion-label>Merchant ID</ion-label>
  <ion-input type="number" required   [(ngModel)]="merchant_id" ></ion-input>
</ion-item>
<ion-item>
    <ion-label>Amount</ion-label>
    <ion-input type="number" required  [(ngModel)]="amount" ></ion-input>
  </ion-item>
<ion-item>
  <ion-label>Note</ion-label>
  <ion-textarea name="note" [(ngModel)]="note" ></ion-textarea>
</ion-item>
<button ion-button color="secondary" (click)="submitQpay()" block>Pay Now</button>

---

虽然我没有尝试你的答案，但我认为这不是我的问题，因为我可以正确接收其他输入。以及如果手动写入，我可以正确接收的商户id。

<ion-item>
  <ion-label>Merchant ID</ion-label>
  <ion-input type="number" required   [(ngModel)]="merchant_id" ></ion-input>
</ion-item>
<ion-item>
    <ion-label>Amount</ion-label>
    <ion-input type="number" required  [(ngModel)]="amount" ></ion-input>
  </ion-item>
<ion-item>
  <ion-label>Note</ion-label>
  <ion-textarea name="note" [(ngModel)]="note" ></ion-textarea>
</ion-item>
<button ion-button color="secondary" (click)="submitQpay()" block>Pay Now</button>

merchant_id: string;
  amount: number;
  note: string;
  id;

submitQpay() { 
    this.fetchphpProvider.fetchurl(Number(this.merchant_id), this.amount,this.note).then(data => {
      this.url = data;
      console.log(this.url.payment_url);
      this.iab.create(this.url.payment_url, '_self', {
        toolbar : "no",
        fullscreen : "yes"
      });
    });
  }