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

Question

在我的 Angular-12 代码中，我有这个组件：

组件：

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>

我收到了这个错误，而不是要加载的表单：

错误 TS2531：对象可能为“空”

错误 TS7052：元素隐式具有“任何”类型，因为类型“AbstractControl”没有索引签名。您的意思是调用“get”吗？

这一行被高亮显示：

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

在

我该如何解决这个问题？

谢谢

Answer 1

问题是achievementDetailsForm.get('achievements') 返回一个AbstractControl 实例，所以在模板中，编译器将无法知道它是一个FormArray 实例，因此它不知道它有@987654324 @属性。

要解决此问题，您可以创建一个返回 FormArray 实例的 getter，或者（最好恕我直言）将 FormArray 存储在一个变量中（我们称之为 achievementsFormArray），然后您可以在模板中使用它（以及在 TS 文件中）：

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