Angular响应式表单报错：this.formDirective is null 求助

问题场景 #

开发Angular响应式表单时触发如下错误，相关代码及报错信息如下：

HTML模板代码 #

<div class="container">
  <form formGroupName="checkoutForm">
    <section>
        <div class="row">
            <div class="col col-12 col-lg-8">
                <div class="row mb-4">
                    <div formGroupName="deliveryAddress">
                        <div class="col">
                            <label class="form-label">First Name</label>
                            <input id="firstName" class="form-control fw-bold" type="text" required
                                formControlName="firstName" (change)="saveToDataStore()">
                        </div>

                        <div class="col">
                            <label class="form-label">Last Name</label>
                            <input id="lastName" class="form-control fw-bold" type="text" required
                                formControlName="lastName" (change)="saveToDataStore()">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  </form>
</div>

组件TS代码 #

export class Checkout2Component { 
  checkoutForm: FormGroup; 
  public cart;

  ngOnInit() {

    this.checkoutForm = new FormGroup({
      deliveryAddress: new FormGroup({ 
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        phone: new FormControl(''),
        address1: new FormControl(''),
        address2: new FormControl(''),
        useAsBillingAddress: new FormControl(''),
      }),
      applianceDelivery: new FormGroup({ 
          deliveryDate: new FormControl(''),
          specialInstructions: new FormControl(''),
      }),
      paymentMethod: new FormGroup({ 
        // paymentType: 'new FormControl(Credit Card'),
        cardNumber: new FormControl(''),
        expMonth: new FormControl(''),
        expYear: new FormControl(''),
        CVV: new FormControl(''),
        defaultCreditCard: new FormControl(''),
      })
    });

    console.log('this.checkoutForm', this.checkoutForm.value);

    // this.initCheckoutForm();
  }
}

报错信息 #

ERROR TypeError: this.formDirective is null
ngOnInit http://localhost:4200/main-A4KJZJDC.js:14
U0 http://localhost:4200/main-A4KJZJDC.js:10
mN http://localhost:4200/main-A4KJZJDC.js:10
mw http://localhost:4200/main-A4KJZJDC.js:10
bc http://localhost:4200/main-A4KJZJDC.js:10
CR http://localhost:4200/main-A4KJZJDC.js:10
Gh http://localhost:4200/main-A4KJZJDC.js:10
w_ http://localhost:4200/main-A4KJZJDC.js:10
ER http://localhost:4200/main-A4KJZJDC.js:10
__ http://localhost:4200/main-A4KJZJDC.js:10
CR http://localhost:4200/main-A4KJZJDC.js:10
Gh http://localhost:4200/main-A4KJZJDC.js:10
w_ http://localhost:4200/main-A4KJZJDC.js:10
D_ http://localhost:4200/main-A4KJZJDC.js:10
CR http://localhost:4200/main-A4KJZJDC.js:10
Gh http://localhost:4200/main-A4KJZJDC.js:10
w_ http://localhost:4200/main-A4KJZJDC.js:10
ER http://localhost:4200/main-A4KJZJDC.js:10
__ http://localhost:4200/main-A4KJZJDC.js:10
CR http://localhost:4200/main-A4KJZJDC.js:10
Gh http://localhost:4200/main-A4KJZJDC.js:10
bR http://localhost:4200/main-A4KJZJDC.js:10
v_ http://localhost:4200/main-A4KJZJDC.js:10
_P http://localhost:4200/main-A4KJZJDC.js:10
detectChangesInAttachedViews http://localhost:4200/main-A4KJZJDC.js:10

解决方案 #

核心问题 #

HTML模板中根表单标签错误使用了formGroupName="checkoutForm"，该指令仅用于绑定嵌套表单组，根表单必须使用[formGroup]="checkoutForm"指令来绑定组件中的表单实例。

修复步骤 #

1. 修正表单绑定指令
   修改HTML中的<form>标签：

<form [formGroup]="checkoutForm">

2. 确认模块导入
   确保组件所属的NgModule已导入ReactiveFormsModule：

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

@NgModule({
  imports: [
    // 其他模块导入
    ReactiveFormsModule
  ]
})
export class YourComponentModule { }

3. 可选优化：使用FormBuilder简化代码
   推荐用FormBuilder替代手动创建FormGroup和FormControl，代码更简洁易维护：

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

export class Checkout2Component { 
  checkoutForm: FormGroup; 
  public cart;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.checkoutForm = this.fb.group({
      deliveryAddress: this.fb.group({ 
        firstName: [''],
        lastName: [''],
        phone: [''],
        address1: [''],
        address2: [''],
        useAsBillingAddress: [''],
      }),
      applianceDelivery: this.fb.group({ 
          deliveryDate: [''],
          specialInstructions: [''],
      }),
      paymentMethod: this.fb.group({ 
        cardNumber: [''],
        expMonth: [''],
        expYear: [''],
        CVV: [''],
        defaultCreditCard: [''],
      })
    });

    console.log('this.checkoutForm', this.checkoutForm.value);
  }
}

验证 #

修改后重启应用，表单将正确绑定到组件中的checkoutForm实例，this.formDirective is null错误会消失。

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