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.

Can you show the whole component here? There are some things that don't always work with AoT , until specified properly. Is the `section1` property `protected` or `private`? — inthevortex, Nov 09 '18 at 06:47
sectionFormErrors is just a object which is used to map errors — Anuj K.C., Nov 09 '18 at 08:16

Ludevik · Accepted Answer · 2018-11-09T08:47:51.767

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 }"

edited Nov 09 '18 at 08:47

answered Nov 09 '18 at 08:40

Ludevik

6,954
1
41
59

Yes, That was the problem. – Anuj K.C. Nov 09 '18 at 08:58

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

1 Answers1