Property 'section 1' does not exist on type 'FormGroup'. aot build

Question

When I take aot build in angular I got an error Property 'section 1' does not exist on type 'FormGroup'. I had added

<form [formGroup]="currentMonthForm" novalidate>
<table class="table spinwheel-table-blk">
      <thead>
        <tr COLSPAN=2 class="spinwheel-table-heading-block">
          <th>Section ID</th>
          <th><span>Points</span></th>
        </tr>
      </thead>
      <tbody>
        <tr COLSPAN=2>
          <td>1</td>
          <td>
            <div class="input-group wingsclub-inputgroup">
              <input type="text" class="form-control validation-field" placeholder="Points" aria-label="Recipient's username"
                aria-describedby="basic-addon2" maxlength="3" formControlName="section1" [ngClass]="{ 'is-invalid': currentMonthForm.section1 }"
                (input)="section1Change(1)">
              <small class="text-danger" *ngIf="sectionFormErrors.section1">
                <small class="text-danger" *ngIf="sectionFormErrors.section1">{{sectionFormErrors.section1}}</small>
              </small>
            </div>
          </td>
        </tr>
<table>

and in component I had

currentMonthForm: FormGroup;
constructor(){
this.buildForm();
}
    buildForm() {
        this.currentMonthForm = this.fb.group({
          section1: [null, Validators.compose([Validators.required, Validators.maxLength(3),
          CustomValidators.number, this.validateNumber, CustomValidatorsInUse.isInteger, CustomValidatorsInUse.isPositiveInteger,])],})

But I get error Property 'section 1' does not exist on type 'FormGroup'. in aot build. But in general build its working correctly.

Answer 1

Seems that the culprit is this:

[ngClass]="{ 'is-invalid': currentMonthForm.section1 }"

JIT compiler doesn't check whether the property really exist on the object, but AOT build does and it complains that currentMonthForm FormGroup doesn't have that property. You should fix the condition for is-invalid class as it is very strange currently. I would expect something like:

[ngClass]="{ 'is-invalid': currentMonthForm.get('section1').errors !== null }"