Angular - 对象可能为“null”：错误 TS7052：元素隐式具有“any”类型，因为类型“AbstractControl”

Question

In my Angular-12 code I have this component:

component:

export class AchievementFormComponent implements OnInit {
  data!: ICandidate;
  @Input() achievementDetailsForm!: FormGroup;
  constructor(
    private fb: FormBuilder,
    private candidateService: CandidateService
  ) { }

  ngOnInit(): void {
    this.achievementDetailsForm = this.fb.group({
      achievements: this.fb.array([this.createAchievementFormGroup()]),
    });
  }

  public addAchievementFormGroup() {
    const achievements = this.achievementDetailsForm.get('achievements') as FormArray;
    achievements.push(this.createAchievementFormGroup());
  }

  public removeOrClearAchievement(i: number) {
    const achievements = this.achievementDetailsForm.get('achievements') as FormArray;
    if (achievements.length > 1) {
      achievements.removeAt(i);
    } else {
      achievements.reset();
    }
  }

  private createAchievementFormGroup(): FormGroup {
    return new FormGroup({
      institution: new FormControl(''),
      degree: new FormControl(''),
      startDate: new FormControl(''),
      endDate: new FormControl(''),
      description: new FormControl(''),
      percentage: new FormControl(''),
    });
  }

  addAchievementDetails() {
    if (this.achievementDetailsForm.dirty) {
      this.data = this.candidateService.getCandidateDetails();
      this.data.achievement = this.achievementDetailsForm.value.achievements;
      this.candidateService.setCandidateDetails(this.data);
    }
  }
}

html:

 <form [formGroup]="achievementDetailsForm"> <div class="row"> <div class="col-md-12 col-lg-12 mb-4 align-items-stretch"> <div class="card border-0 rounded-0 h-100"> <div class="card-title mb-1 p-3"> <h5>Achievement Details:</h5> </div> <div class="card-body"> <div formArrayName="achievements"> <div *ngFor="let achievement of achievementDetailsForm.get('achievements')['controls']; let i = index" [formGroupName]="i"> <div class="form-group row"> <label for="institution" class="col-sm-2 col-form-label text-nowrap">Institute Name:</label> <div class="col-xs-4"> <input type="text" id='institution' maxlength="20" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' class="form-control" placeholder="Enter your institution name" formControlName="institution" required> </div>&nbsp;&nbsp;&nbsp; <label for="degree" class="col-sm-2 col-form-label text-nowrap">Board/ Degree:</label> <div class="col-xs-4"> <input class="form-control" id="degree" placeholder="Enter your degree/degree" type="text" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' formControlName="degree" required> </div> <div class="col-xs-4"> <button class="float-left" mat-icon-button color="primary" aria-label="Add" (click)="addAchievementFormGroup()" matTooltip="Add"> <mat-icon>add_circle_outline</mat-icon> </button> <button class="float-left" mat-icon-button color="primary" aria-label="Remove/clear" (click)="removeOrClearAchievement(i)" matTooltip="Remove"> <mat-icon>highlight_off</mat-icon> </button> </div> </div> <div class="form-group row"> <label for="description" class="col-sm-2 col-form-label text-nowrap">Stream:</label> <div class="col-xs-4"> <input type="text" id='description' maxlength="15" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' class="form-control" placeholder="Enter your stream/major" formControlName="description" required> </div>&nbsp;&nbsp;&nbsp; <label for="startDate" class="col-sm-2 col-form-label text-nowrap">Starting date:</label> <div class="col-xs-4"> <input type="date" id="startDate" class="form-control" placeholder="dd-mm-yyyy" value="" formControlName="startDate" required> </div> </div> <div class="form-group row"> <label for="zipcode" class="col-sm-2 col-form-label text-nowrap">Percentage(%):</label> <div class="col-xs-4"> <input type="text" class="form-control" id="percentage" placeholder="Enter your percentage" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\\..*)\\./g, '$1');" maxlength="3" formControlName="percentage" required> </div>&nbsp;&nbsp;&nbsp; <label for="endDate" class="col-sm-2 col-form-label text-nowrap">Ending date:</label> <div class="col-xs-4"> <input type="date" id="endDate" class="form-control" placeholder="dd-mm-yyyy" value="" formControlName="endDate" required> </div> </div> <hr /> </div> </div> </div> </div> </div> </div> <div> <button mat-button matStepperPrevious>Back</button> <button mat-button matStepperNext (click)="addAchievementDetails()">Next</button> </div> </form>

Instead of the form to load, I got this error:

error TS2531: Object is possibly 'null'

error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

and this line is highlighted:

achievementDetailsForm.get('achievements')['controls'];

in

How do I resolve this?

Thanks

Answer 1

The problem is that achievementDetailsForm.get('achievements') returns an AbstractControl instance, so in template, the compiler won't be able to know that it's a FormArray instance and thus it doesn't know that it has the controls property.

To solve this problem, you could either create a getter that returns the FormArray instance or (preferably IMHO) store the FormArray in a variable (let's call it achievementsFormArray ) and then you can use this in template (and also within TS file):

TS :

export class AchievementFormComponent implements OnInit {
  data!: ICandidate;
  @Input() achievementDetailsForm!: FormGroup;
  readonly achievementsFormArray!: FormArray;

  constructor(
    private fb: FormBuilder,
    private candidateService: CandidateService,
  ) {}
    
  ngOnInit(): void {
    // Note that you could also initialize these properties directly in the declaration and then remove `ngOnInit` completely.
    this.achievementsFormArray = this.achievementsFormArray = this.fb.array([
      this.createAchievementFormGroup(),
    ]);
    this.achievementDetailsForm = this.fb.group({
      achievements: this.achievementsFormArray,
    });
  }

  // ...
}

HTML :

<div *ngFor="let achievement of achievementsFormArray.controls; let i = index" [formGroupName]="i">
...