Ionic7/Angular动态组件中[formControlName]绑定与验证问题

问题描述 #

自定义RequiredTextField动态表单组件在HomePage调用时，无法将title表单控件绑定到[formControlName]，验证功能失效，控制台报错：

• TypeError: Cannot read properties of undefined (reading 'errors')
• Error: Cannot find control with name: '[object Object]'

错误原因 #

1. 控件绑定类型错误：父组件传递给子组件的formValue是FormControl实例，但formControlName指令需要的是表单控件的名称字符串（如'title'），直接传控件实例会被转成[object Object]，导致找不到对应控件。
2. 控件访问方式错误：子组件模板中用generalForm.controls.formValue访问控件，这里的formValue是变量，不是控件名，应该通过控件名称动态获取控件实例。

修复步骤 #

1. 修改子组件 RequiredText.ts

将formValue的类型改为string，并添加一个getter方法方便模板获取对应表单控件：

import { NgIf } from '@angular/common';
import { Component, Input } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-required-text-field',
  templateUrl: './required-text-field.component.html',
  styleUrls: ['./required-text-field.component.scss'],
  standalone: true,
  imports: [IonicModule, FormsModule, ReactiveFormsModule, NgIf],
})
export class RequiredTextFieldComponent {

  @Input() generalForm: FormGroup;
  @Input() labelText: string;
  @Input() formValue: string; // 改为字符串类型，接收控件名称
  @Input() isSubmitted: boolean;

  // 获取当前表单控件实例
  get currentControl(): FormControl {
    return this.generalForm.get(this.formValue) as FormControl;
  }
}

2. 修改子组件 RequiredText.html

更新控件绑定和错误判断逻辑，使用currentControl getter获取控件：

<ion-row class="animate__animated animate__zoomIn">
  <ion-col size="3">
    <b>{{labelText}}</b>
    <br>
    <span class="recom" *ngIf="!(isSubmitted && currentControl.errors?.required)">
      Recommended
    </span>
  </ion-col>
  <ion-col size="9" [formGroup]="generalForm">
    <ion-input 
      [class.error-border]="isSubmitted && currentControl.errors?.required" 
      type="text"
      [formControlName]="formValue" 
      [clearInput]="true"
    ></ion-input>
    <span class="error ion-padding animate__animated animate__fadeIn"
      *ngIf="isSubmitted && currentControl.errors?.required">
      Required.
    </span>
  </ion-col>
</ion-row>

3. 修改父组件 home.html 的组件调用

传递控件名称字符串'title'给formValue，而不是FormControl实例：

<form [formGroup]="blogPostForm">
  <ion-grid>
    <app-required-text-field 
      [generalForm]="blogPostForm" 
      [labelText]="blogPostTitle"
      [formValue]="'title'" <!-- 传递控件名称字符串 -->
      [isSubmitted]="isSubmitted"
    ></app-required-text-field>        
  </ion-grid>
</form>

4. 补充父组件提交逻辑（可选）

如果需要触发验证，在home.ts中添加提交方法：

// ... 现有代码
submitForm() {
  this.isSubmitted = true;
  if (!this.blogPostForm.valid) {
    console.log('表单验证失败');
    return;
  }
  console.log('表单提交成功', this.blogPostForm.value);
}

然后在home.html中添加提交按钮：

<!-- 放在form标签内 -->
<ion-button type="submit" (click)="submitForm()" expand="block">提交</ion-button>

修复效果 #

修改完成后，表单控件绑定正常，提交时会正确触发必填项验证，错误提示正常显示，控制台报错消失。

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