как изменить значение ввода в ионном 3

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

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

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
}