我是Angular的新手，对于我的表单出了什么问题并不太确定。 这是我在HTML中的代码：
<form [formGroup] = "newEntryForm">
value: {{newEntryForm.value|json}}
<div class="form-group">
<div class="text-center mb-1 col">
<div class="card">
<div class="card-body">
Account Infomation
</div>
</div>
</div>
<div class="row">
<!--Left side-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">First Name</label>
<input formControlName = "Firstname" type="text" class="form-control" />
<div *ngIf="Firstname.invalid && Firstname.dirty"
class="text-danger"><small><strong>First Name Required</strong></small>
</div>
</div>
<div class="form-group">
<label class="control-label mb-1">Account Number</label>
<input type="text" class="form-control" placeholder="ACC#"
formControlName="AccountNumber" />
<div *ngIf="AccountNumber.invalid && (AccountNumber.dirty || AccountNumber.touched)"
class="text-danger"><small><strong>Account Number Required</strong></small>
</div>
</div>
</div>
<!--Right side-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Last Name</label>
<input type="text" class="form-control"
formControlName="Lastname" />
<div *ngIf="Lastname.invalid && (Lastname.dirty || Lastname.touched)"
class="text-danger"><small><strong>Last Name Required</strong></small>
</div>
</div>
<div class="form-group">
<label class="control-label mb-1">ID Number</label>
<input type="text" class="form-control" placeholder="SA ID Number *"
formControlName="IdNumber" />
<div *ngIf="IdNumber.invalid && (IdNumber.dirty || IdNumber.touched)"
class="text-danger"><small><strong>Valid SA Id required</strong></small>
</div>
</div>
</div>
</div>
<div class="text-center mb-1 col">
<div class="card">
<div class="card-body">
Contact Infomation
</div>
</div>
</div>
<div class="row">
<!--left-->
<div class="form-group">
<div class="col-md-4">
<label class="control-label mb-1">Mobile</label>
<input type="text" class="form-control" placeholder="072500000"
formControlName="TelMobile" />
<div *ngIf="TelMobile.invalid && (TelMobile.dirty || TelMobile.touched)"
class="text-danger"><small><strong>Mobile Number is invalid</strong></small>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button class="btn btn-primary mt-4" type="button" (click)="toggleTel()">+ Tel</button>
</div>
</div>
<div *ngIf="addTel" class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Telephone Other</label>
<input type="text" class="form-control" placeholder="0"
formControlName="TelOther" />
</div>
</div>
<!--right-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Email Home</label>
<input type="text" class="form-control" placeholder="joe@mail.com"
formControlName="EmailHome" />
<div *ngIf="EmailHome.invalid && (EmailHome.dirty || EmailHome.touched)"
class="text-danger"><small><strong>Email Format is invalid</strong></small>
</div>
</div>
</div>
<div class="col-md-6">
<div *ngIf="addTel" class="form-group">
<label class="control-label mb-1">Telephone Home</label>
<input type="text" class="form-control" placeholder="0725000000"
formControlName="TelHome" />
</div>
</div>
<div class="col-md-6">
<div *ngIf="addTel" class="form-group">
<label class="control-label mb-1">Telephone Work</label>
<input type="text" class="form-control" placeholder="0725000000"
formControlName="TelWork" />
</div>
</div>
</div>
<!--Address section-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Address Line 1 </label>
<input formControlName="Address1Home" type="text" class="form-control" />
<div *ngIf="Address1Home.invalid && Address1Home.dirty"
class="text-danger"><small><strong>Address Required</strong></small>
</div>
</div>
</div>
表单变长了。我的保存函数调用 onSave。我的 .ts 文件看起来像这样：
this.newEntryForm = this.fb.group({
Firstname: ['', Validators.required],
Lastname: ['', Validators.required],
AccountNumber: ['', [
Validators.required,
Validators.maxLength(25),
]],
IdNumber: ['', [Validators.required,
Validators.pattern('(?<Year>[0-9][0-9])(?<Month>([0][1-9])|([1][0-2]))(?<Day>([0-2][0-9])|([3][0-1]))(?<Gender>[0-9])(?<Series>[0-9]{3})(?<Citizenship>[0-9])(?<Uniform>[0-9])(?<Control>[0-9])'),
]],
Address1Home: ['', Validators.required],
Address2Home: ['', Validators.required],
Address3Home: ['', Validators.required],
PostalCodeHome: ['', Validators.required],
我的OnSave函数：
onSave(){
console.log(this.newEntryForm.value);
我在.ts文件中为每个控件都编写了getter方法，例如：
get AccountNumber() {
return this.newEntryForm.get('AccountNumber');
}
get IdNumber() {
return this.newEntryForm.get('Id');
}
get Firstname() {
return this.newEntryForm.get('Firstname');
}
get Lastname() {
return this.newEntryForm.get('Lastname');
}
get EmailHome(){
return this.newEntryForm.get('EmailHome');
}
然而，我遇到了“无法读取空值的无效属性”错误，并且表单似乎只跟踪了名字、姓氏、账户号和ID，但其他所有内容都被省略了。表格有点长，但我已为问题缩短了它。
有任何想法在哪里可能出错了吗？谢谢 :)