Question

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

我有一个包含表单的页面，我正在从另一个页面接收一个参数以注入表单。

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

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

没有显示完整的.ts代码，很难说，但似乎你没有传递价值。所以，你需要改变：

(ngSubmit)="submitQpay(form)"

到

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

然后在.ts文件

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

Answer 2

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

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

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

2 个答案: