Angular 17响应式表单报错NG01203：无firstName控件值访问器

问题描述 #

编写了如下Angular表单HTML代码：

<form [formGroup]="billingFormGroup" (ngSubmit)="onSubmit()">
          <div class="row gy-3">
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase" >Ime</label>
              <input class="form-control form-control-lg"formControlName ="firstName" name="firstName" type="text" id="firstName" placeholder="Unesite svoje ime">
            </div>
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase" formControlName ="lastName" name="lastName">Prezime</label> 
              <input class="form-control form-control-lg" type="text"formControlName ="lastName" name="lastName" id="lastName" placeholder="Unesite svoje prezime">
            </div>
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase" >Email</label>
              <input class="form-control form-control-lg" formControlName ="email" name="email"type="email" id="email" placeholder="e.g. Jason@example.com">
            </div>
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase" >Broj telefona</label>
              <input class="form-control form-control-lg" type="tel" id="phone" placeholder="e.g. +381 6665544"formControlName ="phoneNumber" name="phoneNumber">
            </div>
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase" >Ime kompanije(opciono) </label>
              <input class="form-control form-control-lg" type="text" id="company" placeholder="Ime kompanije"formControlName ="companyName" name="companyName">
            </div>

            <div class="col-lg-12">
              <label class="form-label text-sm text-uppercase" >Adresa 1</label>
              <input class="form-control form-control-lg" type="text" id="address" placeholder="Postanski broj,ulica i broj"formControlName ="address1" name="address1">
            </div>
            <div class="col-lg-12">
              <label class="form-label text-sm text-uppercase" >Adresa 2</label>
              <input class="form-control form-control-lg" type="text" id="addressalt" placeholder="Sprat,zgrada,ulaz"formControlName ="address2"  name="address2">
            </div>
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase" >Grad</label>
              <input class="form-control form-control-lg" type="text" id="city"formControlName ="city"  name="city"placeholder="Unesite grad">
            </div>
            <div class="col-lg-6">
              <label class="form-label text-sm text-uppercase"  >Drzava</label>
              <input class="form-control form-control-lg" type="text" id="state" formControlName ="state" name="state"placeholder="Unesite drzavu">
            </div>        
            <div class="col-lg-12 form-group">
              <button class="btn btn-success" type="submit">Porucite</button>
            </div>
          </div>
        </form>

对应的checkout.component.ts代码：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormsModule, Validators,ReactiveFormsModule } from '@angular/forms';
import { Order } from '../models/order.model';

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './checkout.component.html',
  styleUrl: './checkout.component.css',
})
export class CheckoutComponent implements OnInit{

  billingFormGroup!:FormGroup
  order:Order = new Order()


constructor(){

}
  onSubmit() {
    this.order.firstName=this.billingFormGroup.get('firstName')?.value;
    this.order.lastName=this.billingFormGroup.get('lastName')?.value;
    this.order.email=this.billingFormGroup.get('email')?.value;
    this.order.phoneNumber=this.billingFormGroup.get('phoneNumber')?.value;
    if(this.billingFormGroup.get('companyName')?.value != null)this.order.companyName=this.billingFormGroup.get('companyName')?.value;
    if(this.billingFormGroup.get('address1')?.value != null)this.order.address=this.billingFormGroup.get('address1')?.value;
    if(this.billingFormGroup.get('address2')?.value != null)this.order.optionalAddress=this.billingFormGroup.get('address2')?.value;
    this.order.town=this.billingFormGroup.get('city')?.value;
    this.order.state=this.billingFormGroup.get('state')?.value;

    console.log(this.order)
    }
    

  ngOnInit(): void {
this.billingFormGroup=new FormGroup({
  'firstName':new FormControl('',[Validators.required]),
  'lastName':new FormControl('',[Validators.required]),
  'email':new FormControl('',[Validators.email]),
  'phoneNumber':new FormControl('',[Validators.required]),
  'companyName':new FormControl(''),
  'address1':new FormControl('',[Validators.required]),
  'address2':new FormControl(''),
  'city':new FormControl('',[Validators.required]),
  'state':new FormControl('',[Validators.required])
})
   
  }
}

运行时抛出错误：ERROR Error: NG01203: No value accessor for form control name: 'firstName'

错误原因 #

这个错误和Angular 17新增特性无关，是HTML代码中的低级错误导致的：你在第二个<label>标签上错误地添加了formControlName="lastName"和name="lastName"属性。

<label>元素本身不是表单控件，Angular无法为它找到对应的ControlValueAccessor（值访问器），当Angular解析表单时，会遍历所有带有formControlName的元素，遇到<label>这种不支持该属性的元素时，就会抛出NG01203错误。

解决方法 #

只需要移除<label>标签上多余的formControlName和name属性即可，修改后的该部分代码：

<div class="col-lg-6">
  <label class="form-label text-sm text-uppercase">Prezime</label> 
  <input class="form-control form-control-lg" type="text" formControlName="lastName" name="lastName" id="lastName" placeholder="Unesite svoje prezime">
</div>

其余代码无需修改，重新运行即可解决该错误。

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