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

Question

我是 ionic 新手，需要一些帮助。

我有一个包含表单的页面，并且我正在从另一个页面接收要注入到表单中的参数。

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

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>

现在在这里，正如我提到的，值已更改，您可以明显看到它，但我点击提交时，值未定义，当我删除一个数字并重写它时，它会提交正常，这让人认为该值实际上不是改变了，我需要以某种方式触发改变。

有什么帮助或有用的提示吗？

如果您需要离子信息：

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.8.0

System:

    Node : v8.11.1
    npm  : 6.0.1
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Answer 1

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

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>

ts 代码：

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"
      });
    });
  }

Answer 2

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

(ngSubmit)="submitQpay(form)"

到

(ngSubmit)="submitQpay(qpay_form.value)"

然后在 .ts 文件中

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