这是一个带验证的字段组件的类型脚本代码。

RequiredText.ts

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: any;
  @Input() isSubmitted: boolean;

}

这是HTML

RequiredText.html

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

我想在我的home.html中使用这个组件，我这样调用这个组件：

<form [formGroup]="blogPostForm">
        <ion-grid>
          <app-required-text-field [generalForm]="blogPostForm" [labelText]="blogPostTitle"
            [formValue]="blogPostForm.get('title')" [isSubmitted]="isSubmitted"></app-required-text-field>        
        </ion-grid>
</form>

这是我的home.ts文件

import { Component, OnInit } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { Keyboard } from '@capacitor/keyboard';
import { RequiredTextFieldComponent } from "../../components/required-text-field/required-text-field.component";

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
  standalone: true, 
  imports: [IonicModule, ReactiveFormsModule, RequiredTextFieldComponent]
})

export class HomePage implements OnInit {

  blogPostTitle = "Title";
  blogPostForm: FormGroup;
  isSubmitted = false;

  constructor(public formBuilder: FormBuilder, private datePipe: DatePipe) { }

  ngOnInit() {
    this.blogPostForm = this.formBuilder.group({
      title: ['', [Validators.required]],

    })
  }

  get errorControl() {
    return this.blogPostForm.controls;
  }

}

问题是我无法将标题绑定到动态表单控件属性。验证也不起作用。
我已经尝试了几种解决方案和语法，比如使用数据类型作为FormControl。我在控制台中得到以下错误。
TypeError：Cannot read properties of undefined（阅读'errors'）错误：找不到名称为：'[object Object]'
我认为绑定是有效的，但不是验证。如何根据父组件验证子组件？