Angular无路由懒加载组件表单报错：No value accessor for form control

1. <ng-template>无法绑定formControlName：<ng-template>只是模板容器，并非可与表单控件绑定的DOM元素/组件，本身没有值访问器（Value Accessor），所以直接在它上面加formControlName必然触发No value accessor报错。
2. 子组件未实现表单交互接口：虽然子组件注册了NG_VALUE_ACCESSOR和NG_VALIDATORS，但没有实现对应的ControlValueAccessor和Validator接口，无法与父表单的控件完成值同步。
3. 表单结构设计不合理：父组件用FormControl存储子组件的多字段表单值，不符合Angular嵌套表单的设计逻辑，应该用FormGroup做嵌套更合理。

方案一：嵌套FormGroup（推荐，符合Angular表单设计） #

1. 修改父组件vehicle.component.ts #

将vehicleDetail改为嵌套FormGroup，并在懒加载时把该组传递给子组件：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class VehicleComponent implements OnInit {
  public vehicleForm: FormGroup;
  
  @ViewChild("vehicleDetailLazyLoadComponent", {read: ViewContainerRef}) vehicleDetailLazyLoadComponent!: ViewContainerRef;
  
  constructor(private fb: FormBuilder, private injector: Injector){}
  
  ngOnInit(){
    // 初始化嵌套FormGroup，与子组件字段对应
    this.vehicleForm = this.fb.group({
      vehicleDetail: this.fb.group({
        model: ['', Validators.required],
        fuel: ['']
      })
    });
  }
  
  openVehicleDetail() {
    this.loadVehicleDetailComp();
  }
  
  async loadVehicleDetailComp(){
    const {VehicleDetailModule, VehicleDetailComponent} = await import("./vehicle-detail.component.ts");
    const moduleRef = createNgModule(VehicleDetailModule, this.injector)
    this.vehicleDetailLazyLoadComponent.clear();
    const {instance} = this.vehicleDetailLazyLoadComponent.createComponent(VehicleDetailComponent, {ngModuleRef: moduleRef});
    // 将父表单的嵌套FormGroup传递给子组件
    instance.form = this.vehicleForm.get('vehicleDetail') as FormGroup;
  }
}

2. 修改父组件vehicle.component.html #

移除<ng-template>上的formControlName：

<form [formGroup]="vehicleForm">
  <button (click)="openVehicleDetail()">Click</button>
  
  <ng-template #vehicleDetailLazyLoadComponent></ng-template>
</form>

3. 修改子组件vehicleDetail.component.ts #

去掉多余的表单提供者，改用@Input接收父组件传递的FormGroup：

import { Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-vehicle-detail',
  templateUrl: './vehicle-detail.component.html',
  // 移除NG_VALUE_ACCESSOR和NG_VALIDATORS提供者
})
export class VehicleDetailComponent implements OnInit {
  @Input() form!: FormGroup;
  
  constructor(){}
  
  ngOnInit(){
    // 无需自行创建form，直接使用父组件传递的实例
  }
}

4. 修改子组件vehicleDetail.component.html #

去掉独立的<form>标签（避免嵌套表单冲突），直接绑定父组件传递的FormGroup：

<div [formGroup]="form">
  Model: <input formControlName="model" />
  Fuel: <input formControlName="fuel" />
</div>

方案二：子组件实现ControlValueAccessor（封装为独立表单控件） #

如果需要把子组件封装成一个独立的表单控件（父组件用FormControl存储子组件的完整对象），可以按以下步骤修改：

1. 修改子组件vehicleDetail.component.ts #

实现ControlValueAccessor和Validator接口，完成值同步和校验：

import { OnInit, forwardRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';

@Component({
  selector: 'app-vehicle-detail',
  templateUrl: './vehicle-detail.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => VehicleDetailComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => VehicleDetailComponent),
      multi: true
    }
  ]
})
export class VehicleDetailComponent implements OnInit, ControlValueAccessor, Validator {
  form: FormGroup;
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};
  
  constructor(private fb: FormBuilder){}
  
  ngOnInit(){
    this.form = this.fb.group({
      model: ['', Validators.required],
      fuel: ['']
    });
    // 监听表单值变化，同步到父组件
    this.form.valueChanges.subscribe(value => this.onChange(value));
  }

  // ControlValueAccessor 接口方法：接收父组件传递的值
  writeValue(value: any): void {
    if (value) this.form.patchValue(value);
  }

  // ControlValueAccessor 接口方法：注册值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // ControlValueAccessor 接口方法：注册触摸回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // ControlValueAccessor 接口方法：设置禁用状态
  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.form.disable() : this.form.enable();
  }

  // Validator 接口方法：返回校验结果
  validate(control: AbstractControl): ValidationErrors | null {
    return this.form.valid ? null : { invalidVehicleDetail: true };
  }
}

2. 修改父组件vehicle.component.ts #

懒加载时手动关联子组件与父表单的FormControl：

import { FormControlDirective } from '@angular/forms';

async loadVehicleDetailComp(){
  const {VehicleDetailModule, VehicleDetailComponent} = await import("./vehicle-detail.component.ts");
  const moduleRef = createNgModule(VehicleDetailModule, this.injector)
  this.vehicleDetailLazyLoadComponent.clear();
  const componentRef = this.vehicleDetailLazyLoadComponent.createComponent(VehicleDetailComponent, {ngModuleRef: moduleRef});
  
  // 获取父表单的vehicleDetail控件
  const vehicleDetailControl = this.vehicleForm.get('vehicleDetail') as FormControl;
  // 手动关联子组件与表单控件
  const formControlDirective = componentRef.injector.get(FormControlDirective);
  formControlDirective.control = vehicleDetailControl;
  formControlDirective.valueAccessor = componentRef.instance as ControlValueAccessor;
}

3. 父组件HTML保持不变（移除<ng-template>上的formControlName） #

<form [formGroup]="vehicleForm">
  <button (click)="openVehicleDetail()">Click</button>
  
  <ng-template #vehicleDetailLazyLoadComponent></ng-template>
</form>

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