错误类型错误：无法读取空 Angular 8 的属性"无效"

Question

我是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="[e-mail]"
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>

形式更长。我的save函数调用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);

我的每个控件都有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');
}

然而，我得到了一个null错误的Cannot read属性"invalid"，表单似乎只跟踪Firstname、Lastname、Acc#和ID，但忽略了其他所有内容。表格长了一点，但我为了这个问题把它缩短了。

你知道我哪里会出错吗？谢谢：(

Answer 1

您可以简单地使用?符号来检查左侧表达式是否存在

Firstname?.invalid && Firstname?.dirty

它相当于这个

Firstname && Firstname.invalid && Firstname.dirty