angular - 使用反应形式的离子 5 和 Angular 9 出现错误“无名称的表单控件的值访问器”

Question

我正在使用 ionic 5 和 Angular 9。我正在尝试创建一个反应式表单，但我收到错误“没有名称的表单控件的值访问器：‘姓氏’”。

这是我的代码：

export class ModalComponent implements OnInit {

  public form: FormGroup;

  constructor(private modalController: ModalController,
              private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.initForm();
  }

  public close(): void {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalController.dismiss({
      'dismissed': true
    });
  }

  public initForm(): void {
    this.form = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required]
    });
  }

  logForm(){
    console.log(this.form.value)
  }
}

<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
    <ion-item>
      <ion-label>Last name</ion-label>
      <ion-input type="text" formControlName="lastname"></ion-input>
    </ion-item>
</form>

编辑：我刚刚发现了问题。我的模块中缺少导入 IonicModule。

Answer 1

如果您的组件 (ModalComponent) 是从您自己的共享模块 (MyModule) 初始化的，则必须导入 IonicModule 以便它知道如何使用 value="" 属性进行渲染。

我的.module.ts：

...
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [ModalComponent],
  imports: [CommonModule],
  exports: [ModalComponent, FormsModule, ReactiveFormsModule, IonicModule],
})
export class MyModule {}

我只是在处理这个问题，我花了一段时间才弄清楚 ReactiveForms 代码试图访问<input value="">不存在的属性，因为它仍然是一个未转换的<ion-input>元素。

Answer 2

我遇到了同样的问题，并通过将 ngDefaultControl 添加到输入标签来修复它。

<ion-input type="text" name="address" value="" formControlName="address" ngDefaultControl></ion-input>

Answer 3

也许您使用的离子组件不能使用 formControlName 属性或写错了。例如切换->切换：

<ion-togle [formControlName]="myName"></ion-togle>

（这会引发错误“没有名称的表单控件的值访问器：...”）

代替

<ion-toggle  [formControlName]="myName"></ion-toggle> 

（工作正常，没有错误）