我已经将应用程序从angular 8转换为angular 14，我有一个表单数组突然出现此错误
cfs-detail.component.html：13错误类型错误：无法在表单组指令的设置表单容器（forms.mjs：3182：5）的设置验证器（forms. mjs：3065：24）的getControlValidators（forms. mjs：901：20）处读取null属性（阅读“_rawValidators”）。在表单组指令的_setUpFormContainer（forms.mjs：4996：9）处读取null属性。在表单组名称的addFormGroup（forms.mjs：4883：14）处读取null属性。在selectIndexInternal（core. mjs：9826：17）处的callHook（core. mjs：2498：22）处读取null属性（读取“_rawValidators”）
数组没有正确呈现。下面是它最初加载的图片。在控件之间切换似乎会使它的行为更好，直到您最终获得看起来正确的内容。

这是我所期待的。这是一个CSS网格。CSS在Angular 升级之前是正确的。我很确定这是我试图让所有的“初始值错误消失”所做的事情。

这里是HTML模板

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

下面是组件代码

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({
  selector: 'app-cfs-12months',
  templateUrl: './cfs12-months.component.html',
  styleUrls: ['./cfs12-months.component.css']
})
export class cfs12MonthsComponent implements OnInit {

@Input() showBy : string="byQtr";
@Input() cfsPeriods : CashFlowStringPeriod[];
@Input() year : number;

    myFormGroup : FormGroup;  //do not 'strong type' this
                                  //2020 10 25 gregm its making me strong type it...
 
 

 toggleFormText:string="-";
 toggleFormVisible:number=1; 

 
  public myPeriods : CashFlowStringPeriod[]=[];
    formatter_shortMonth = new Intl.DateTimeFormat('default', { month: 'short' });

  constructor(private myFormBuilder: FormBuilder
          , private cfsService : cashFlowStringService
          , private cfspService : cashFlowStringPeriodService ) { }

  ngOnInit(): void {
  }
  
 

  buildForm(){
    this.myFormGroup = this.myFormBuilder.group(
      {
        //simply add a formArray to the group
          periods : this.myFormBuilder.array([])
      }
          ,{ updateOn: "blur" }
      );
      
      this.myFormGroup.valueChanges.subscribe((data: any)   => {
        this.saveMainForm();
      });
      
      
    }  //end buildForm
    

    get periods12()   {
       
       return this.myFormGroup.get("periods") as FormArray;

    }

    populateForm(){
       console.log('cf12pf pCount',this.myPeriods.length);
      this.myPeriods.forEach( cfsp =>{
             const periodForm = this.myFormBuilder.group({
                id : [cfsp.id, Validators.required]
                , cashFlowId : [cfsp.cashFlowId, Validators.required]
                , FlowDate : [cfsp.FlowDate, Validators.required]
                , Amount : [cfsp.Amount, Validators.required]
            });
             this.periods12.push(periodForm); 
               
          } //callback
        );// forEach
           console.log('leave pf', this.periods12); 
      }

    
  filterMyPeriods(){
    this.myPeriods = this.cfsPeriods.filter( cfsp => 
           {
              
            let d:Date = this.getDateFromStringOrObject(cfsp.FlowDate);
            return (this.year  == d.getFullYear()) ;
          }
      );
      let f=1;
  }

  getDateFromStringOrObject(input_ : any) : Date{
      let s: string="";
      if (typeof input_ === 'object'){
          s= input_.formatted;
      }else{
        s=input_;
      }
      let d:Date = new Date(s);
      return d;
  } 

 

   public monthShortName (cfsp_ : CashFlowStringPeriod) : string {
    let d= this.getDateFromStringOrObject(cfsp_.FlowDate) ;
     let s:string =this.formatter_shortMonth.format(d).toLowerCase(); 
     console.log("month SN",s);

    return s;
}

   public roundedAmount( cfsp_  : CashFlowStringPeriod) : number{
     return Tools.roundToNplaces(cfsp_.Amount,2);
   }

   formatter_shortDate = new Intl.DateTimeFormat( );
 

    shortDate( cfsp_ : CashFlowStringPeriod) : string {
      let d= this.getDateFromStringOrObject(cfsp_.FlowDate) ;
        let s:string =  this.formatter_shortDate.format(d);
        console.log("shortdate",s);
        return s;
   }
}