angular - 错误类型错误 : Cannot read property 'invalid' of null 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="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 中的每个控件也确实有这样的 setter/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');
  }

但是，我收到了一个无法读取空值错误的“无效”属性，并且该表单似乎只跟踪名字、姓氏、Acc# 和 ID，但忽略了其他所有内容。表格有点长，但我已经缩短了它的问题。
我可能会出错的任何想法？谢谢:)

Answer 1

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

Firstname?.invalid && Firstname?.dirty

相当于这个

Firstname && Firstname.invalid && Firstname.dirty