Ionic 3中表单输入值修改后提交显示undefined的问题求助

我之前在Ionic 3项目里也碰到过一模一样的问题！核心原因是你混合使用了响应式表单（FormGroup/formControlName）和模板驱动表单（ngModel/ngControl），这会让Angular的变更检测机制混乱，导致初始设置的merchant_id值没有真正同步到表单控件里，所以提交时才会显示undefined，手动修改后因为触发了模板端的变更，反而能正常提交。

下面给你具体的修复方案，亲测有效：

第一步：清理HTML模板，移除ngModel和ngControl #

响应式表单不需要依赖ngModel来绑定值，formControlName已经足够完成表单控件和FormGroup的关联，保留ngModel反而会引发冲突。修改后的HTML代码如下：

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

第二步：调整TS代码，用纯响应式表单逻辑处理 #

不需要单独存储id和merchant_id变量，直接在FormGroup初始化时传入初始值，提交时直接从qpay_form.value获取表单数据即可：

export class QpayPage { 
  private qpay_form: FormGroup; 

  constructor(
    public navParams: NavParams, 
    private iab: InAppBrowser, 
    public nav: NavController, 
    private formBuilder: FormBuilder, 
    public popoverCtrl: PopoverController, 
    public fetchphpProvider: FetchphpProvider
  ) { 
    // 直接从导航参数获取值并初始化表单
    const merchantId = this.navParams.get('id');
    this.qpay_form = this.formBuilder.group({
      merchant_id: [merchantId, Validators.required],
      amount: ['', Validators.required],
      note: [''],
    });
  }

  submitQpay() {
    // 先校验表单有效性
    if (!this.qpay_form.valid) {
      console.log("表单填写不完整");
      return;
    }
    // 获取表单所有值，此时merchant_id会正常显示
    const formData = this.qpay_form.value;
    console.log("提交数据：", formData);
    // 这里写你的提交逻辑，比如调用fetchphpProvider的接口
  }
}

额外优化：确保参数正确加载（可选） #

如果担心导航参数在构造函数中还未完全加载，可以把表单初始值的设置移到ionViewDidEnter钩子中（Ionic页面进入时触发），这样更稳妥：

ionViewDidEnter() {
  const merchantId = this.navParams.get('id');
  // 使用patchValue部分更新表单值
  this.qpay_form.patchValue({
    merchant_id: merchantId
  });
}

为什么这样能解决问题？ #

当你混合使用ngModel和响应式表单时，Angular无法确定以哪个数据源为准。移除ngModel后，表单完全由FormGroup控制，初始值的设置会正确触发表单控件的状态更新，变更检测机制能准确识别到值的存在，提交时自然就能获取到正确的merchant_id了。

内容的提问来源于stack exchange，提问作者alkoofi