Angular 12+Ionic 5.9.1下Reactive Forms的formControlName绑定失效问题

Ionic 表单组件完全兼容 Angular 响应式表单规则，你看到的Ionic文档没有标注formControlName属性，是因为该属性是Angular响应式表单模块提供的指令属性，不属于Ionic组件自带的原生属性，因此不会在Ionic组件属性列表中展示，你当前的写法本身是符合规范的。

你遇到的表单值为空问题，绝大多数场景是模块导入缺失导致的，按以下步骤排查即可：

解决步骤 #

• 确认当前页面所属模块的导入配置：如果你的项目用了Ionic默认的页面懒加载机制，每个页面会有独立的module.ts文件，你需要在该页面的模块文件中导入ReactiveFormsModule，如果只在根模块导入不会作用到懒加载页面，示例配置如下：

// 对应页面的xxx.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { YourPageRoutingModule } from './your-page-routing.module';
import { YourPage } from './your-page.page';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    YourPageRoutingModule,
    // 必须添加这一行
    ReactiveFormsModule
  ],
  declarations: [YourPage]
})
export class YourPageModule {}

• 排查模板是否有冲突绑定：确认你没有在ion-input上额外添加value属性、[(ngModel)]双向绑定覆盖响应式表单的绑定逻辑，你当前贴出的模板代码不存在该问题。

相关疑问解答 #

能否直接将单独的FormControl绑定到ion-input？ #

可以，不需要包裹在FormGroup中，直接使用[formControl]指令绑定即可，示例：

// TS代码
import { FormControl, Validators } from '@angular/forms';

export class YourPage {
  amountControl = new FormControl('', Validators.required);

  submitForm() {
    console.log(this.amountControl.value);
  }
}

<!-- 模板代码 -->
<ion-input [formControl]="amountControl" name="amount"></ion-input>

完成配置后你可以在模板中添加临时调试代码验证绑定是否生效：<p>输入值实时展示：{{formGroup.get('amount').value}}</p>，输入内容时如果值同步更新，说明绑定正常。

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