angular - 当我们以 angular4 的反应形式访问嵌套表单组时，在 ng build --prod --aot 中出现错误

Question

我从事过 angular4 项目，在我的项目中，我在一个表单组下使用了多个表单组。它运行没有问题，但是当我尝试使用 ng build --prod --aot 命令对我的项目进行 aot 构建时，出现以下问题：

Property 'controls' does not exist on type 'AbstractControl'

这是我的html代码：

   <form [formGroup]="giftCardForm">
     <ng-container formGroupName="giftCardDetails">
        <div >
           <label>Sender first name</label>
           <div>
              <input placeholder="Ex: James" type="text" formControlName="sender_first_name" [ngClass]="{'disable-field':existingCustomerStatus}">
              <!--TODO: validation is pending -->
              <small *ngIf="(giftCardForm.controls['giftCardDetails']).controls['sender_first_name'].hasError('required') && (giftCardForm.controls['giftCardDetails']).controls['sender_first_name'].touched" class="required alert-danger">Please enter a valid first name.</small>
           </div>
        </div>
     </ng-container>
     <ng-container formGroupName="newCreditCardDetail">
        <div *ngIf="creditCardType == 'new'">
           <div>
              <label>Add New Card</label>
              <div>
                 <input type="number" placeholder="Card Number" formControlName="card_number">
                 <!--TODO: validation is pending -->
                 <small *ngIf="(giftCardForm.controls['newCreditCardDetail']).controls['card_number'].hasError('required') && (giftCardForm.controls['newCreditCardDetail']).controls['card_number'].touched" class="required alert-danger">Please enter a valid card number.</small>
              </div>
           </div>
        </div>
     </ng-container>
     <div >
        <button type="submit">Send</button>
     </div>
  </form>

这是我的打字稿代码：

  this.giftCardForm = this.formBuilder.group({
     "giftCardDetails" : this.formBuilder.group({
        "sender_first_name"   : ['', [Validators.required, Validators.pattern(this.regExpression)]]
     }),
     "newCreditCardDetail" :this.formBuilder.group({
     })
  });