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

Я новичок в 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>

Теперь, как я уже упоминал, значение изменено, вы можете его визуально увидеть, но я нажимаю отправить значение undefined, когда я удаляю одну цифру и перезаписываю ее, она будет отправлена ​​в порядке, что заставило подумать, что значение на самом деле не изменилось, и я нужно как-то вызвать изменение.

Любая помощь или полезные советы?

Если вам нужна ионная информация:

    @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
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
2 021
2

Ответы 2

Трудно сказать, не показывая полного кода .ts, но кажется, что вы не передаете значение. Итак, вам необходимо изменить:

(ngSubmit) = "submitQpay(form)"

к

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

а затем в файле .ts

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

Хотя я не пробовал ваш ответ, но я думаю, что это не моя проблема, поскольку другие входные данные я могу получить правильно. и идентификатор продавца я могу получить правильно, если он был написан вручную.

alkoofi 28.05.2018 10:57

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

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.info(this.url.payment_url);
      this.iab.create(this.url.payment_url, '_self', {
        toolbar : "no",
        fullscreen : "yes"
      });
    });
  }

Другие вопросы по теме