我有这个 HTML 代码：
<form (ngSubmit)="onSubmit()">
<div class="row gy-3">
<div class="col-lg-6">
<label class="form-label text-sm text-upperc
ase" [(ngModel)]="firstName" name="firstName">Ime</label>
<input class="form-control form-control-lg" type="text" id="firstName" placeholder="Unesite svoje ime">
</div>
<div class="col-lg-6">
<label class="form-label text-sm text-uppercase" [(ngModel)]="lastName" name="lastName">Prezime</label>
<input class="form-control form-control-lg" type="text" id="lastName" placeholder="Unesite svoje prezime">
</div>
<div class="col-lg-6">
<label class="form-label text-sm text-uppercase" [(ngModel)]="email" name="email">Email</label>
<input class="form-control form-control-lg" type="email" id="email" placeholder="e.g. [email protected]">
</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"[(ngModel)]="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"[(ngModel)]="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"[(ngModel)]="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"[(ngModel)]="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"[(ngModel)]="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" [(ngModel)]="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 { FormGroup, FormsModule } from '@angular/forms';
import { Order } from '../models/order.model';
@Component({
selector: 'app-checkout',
standalone: true,
imports: [FormsModule],
templateUrl: './checkout.component.html',
styleUrl: './checkout.component.css',
})
export class CheckoutComponent implements OnInit{
billingFormGroup!:FormGroup
order:Order = new Order()
firstName!:string
lastName!:string
email!:string
phoneNumber!:string
companyName!:string
address1!:string
address2!:string
city!:string
state!:string
constructor(){
}
onSubmit() {
this.order.firstName=this.firstName
this.order.lastName=this.lastName
this.order.email=this.email
this.order.phoneNumber=this.phoneNumber
if(this.companyName)this.order.companyName=this.companyName
if(this.address1)this.order.address=this.address1
if(this.address2)this.order.optionalAddress=this.address2
this.order.town=this.city
this.order.state=this.state
// 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])
// })
}
}
注释的代码向我抛出错误。此外，未注释的代码在控制台中向我抛出相同的错误：
错误错误：NG01203：没有表单控件名称的值访问器：'firstName'。欲了解更多信息，请访问 https://angular.io/errors/NG01203
我读过一些关于 ControlValueAccessor 的内容，但我不知道如何实现它。 有人能解释一下为什么 Angular 会抛出这个错误吗？这是 Angular 17 中添加的新功能还是其他东西，因为在以前的版本中我没有遇到任何表单问题？
您无法将 ngModel 绑定到标签。由于标签不提供任何控制值
从;
中删除
[(ngModel)]="firstName"
<label class="form-label text-sm text-upperc
ase" [(ngModel)]="firstName" name="firstName">Ime</label>