I recently upgraded an app from angular 8 to angular14 and encountered a problem with a form array.
The error message I'm seeing is cfs-detail.component.html:13 ERROR TypeError: Cannot read properties of null (reading '_rawValidators'). It seems to be related to the FormBuilder in my code.
When the array loads, it does not render correctly. Initially, it looks off but improves when tabbing through the controls until it eventually displays correctly.
https://i.stack.imgur.com/n8X5d.png
Prior to the Angular upgrade, the CSS grid layout was correct. However, after making changes to fix initial value errors, the layout was disrupted.
https://i.stack.imgur.com/hc2Yf.png
Below is the HTML template for reference:
<ng-template #loading>
<div >loading...</div>
<div *ngIf="!year">please pass in year</div>
<div *ngIf="!showBy">please pass in periodChoice!</div>
<div *ngIf="!myPeriods">periods have not loaded</div>
</ng-template>
<span *ngIf="showBy ; else loading">
<span *ngIf="year ; else loading">
<div class="year">
<button (click)="toggleForm()" id="btnToggle">{{toggleFormText}}</button>
{{year}}
</div>
<div *ngIf="myPeriods as periods ; else loading " class="cfs-12month-grid {{showBy}} y{{year}}">
<ng-container [formGroup]="myFormGroup">
<ng-container formArrayName="periods" >
<ng-container *ngFor="let perFrm of periods12.controls ;let i = index;" formGroupName="i" >
<p class="fieldlabel cfs {{showBy}} {{monthShortName(myPeriods[i])}}">{{shortDate(myPeriods[i]) }}
</p>
<input
class="fieldvalue cfs {{showBy}} {{ monthShortName(myPeriods[i]) }}"
type="text" value="{{roundedAmount(myPeriods[i])}}"
formControlName="Amount"
/>
</ng-container>
</ng-container>
</ng-container>
</div>
</span>
</span>
And here is the component code snippet:
import { Component, OnInit , AfterViewInit
, Input, Output, SimpleChanges
, ElementRef, EventEmitter, ViewChild} from '@angular/core';
import { AbstractControl , FormBuilder, FormGroup
, Validators
, RequiredValidator, MaxLengthValidator, MinLengthValidator, FormControl, FormArray
} from '@angular/forms';
import { Observable } from 'rxjs';
import { Tools } from '../../tools';
import { CashFlowStringPeriod } from '../cash-flow-string-period';
import { cashFlowStringService } from '../services/cash-flow-string.service';
import { cashFlowStringPeriodService } from '../services/cash-flow-string-period.service';
// Component details here...