Angular继承FormGroup组件遇formControlName报错及submit未覆盖问题

问题1：ng-content插入的输入框报NG01050错误 #

原因 #

<ng-content> 投影的内容是在父组件的模板上下文中渲染的，并非继承的 SimpleFormComponent 上下文。也就是说，子类通过ng-content插入的输入框，所在的模板环境并未接入 SimpleFormComponent 中定义的 FormGroup，因此无法找到父级表单指令，触发NG01050错误。

解决方案 #

放弃ng-content内容投影，改用组件继承时直接扩展表单控件的方式，更符合Angular组件继承的设计逻辑：

1. 父类拆分表单初始化逻辑，预留扩展钩子：

// simple-form.component.ts
import { FormGroup, FormBuilder } from '@angular/forms';

export class SimpleFormComponent {
  form: FormGroup;

  constructor(protected fb: FormBuilder) {
    this.initBaseControls();
    this.extendForm(); // 调用可重写的扩展方法
  }

  private initBaseControls() {
    this.form = this.fb.group({
      code: [''],
      description: ['']
    });
  }

  // 定义可被子类重写的空方法
  protected extendForm(): void {}
}

2. 子类重写 extendForm 添加额外控件：

// test.component.ts
import { SimpleFormComponent } from './simple-form.component';

export class TestComponent extends SimpleFormComponent {
  protected override extendForm(): void {
    this.form.addControl('test', this.fb.control(''));
  }
}

3. 子类模板直接添加对应输入框（无需ng-content）：

<!-- test.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <!-- 复用基础控件 -->
  <input formControlName="code" placeholder="编码">
  <input formControlName="description" placeholder="描述">
  <!-- 子类特有控件 -->
  <input formControlName="test" placeholder="扩展字段">
  <button type="submit">提交</button>
</form>

如果一定要用内容投影，可通过 ngTemplateOutlet 传递表单上下文：

<!-- simple-form.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="code" placeholder="编码">
  <input formControlName="description" placeholder="描述">
  <ng-container *ngTemplateOutlet="extraFields; context: { form: form }"></ng-container>
  <button type="submit">提交</button>
</form>

子类模板中：

<!-- test.component.html -->
<app-simple-form>
  <ng-template #extraFields let-form="form">
    <input [formGroup]="form" formControlName="test" placeholder="扩展字段">
  </ng-template>
</app-simple-form>

问题2：表单提交调用父类submit方法而非子类重写方法 #

原因 #

父类模板中绑定的 (ngSubmit)="submit()" 关联的是父类定义的方法引用，若父类未将方法设计为可重写的抽象/虚方法，Angular模板会始终调用父类的原始实现，而非子类的重写逻辑。

解决方案 #

将父类的提交方法设计为可重写的抽象方法或虚方法：

1. 父类改为抽象类，定义抽象提交方法：

// simple-form.component.ts
export abstract class SimpleFormComponent {
  form: FormGroup;

  constructor(protected fb: FormBuilder) {
    this.initBaseControls();
    this.extendForm();
  }

  private initBaseControls() {
    this.form = this.fb.group({
      code: [''],
      description: ['']
    });
  }

  protected extendForm(): void {}

  // 定义抽象提交方法，子类必须实现
  abstract onSubmit(): void;
}

2. 子类实现重写的提交逻辑：

// test.component.ts
export class TestComponent extends SimpleFormComponent {
  protected override extendForm(): void {
    this.form.addControl('test', this.fb.control(''));
  }

  override onSubmit(): void {
    // 子类自定义提交逻辑
    console.log('子类提交数据：', this.form.value);
    // 若需复用父类逻辑，可调用 super.onSubmit();
  }
}

3. 父类模板绑定抽象方法：

<!-- simple-form.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <!-- 表单控件 -->
</form>

若不想将父类改为抽象类，可在父类中定义带默认逻辑的虚方法，子类重写时按需扩展：

// simple-form.component.ts
export class SimpleFormComponent {
  // ... 其他代码

  onSubmit(): void {
    // 父类默认提交逻辑
    console.log('父类提交基础数据：', this.form.value);
  }
}

子类重写：

// test.component.ts
export class TestComponent extends SimpleFormComponent {
  override onSubmit(): void {
    // 子类自定义逻辑
    console.log('子类提交完整数据：', this.form.value);
    // 调用父类逻辑
    super.onSubmit();
  }
}

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