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

Question

error TS2531: Object is possibly 'null'.

46     <ng-container *ngFor="let userFormGroup of
usersForm.get('users')['controls']; let i=index">
                                          
 46:48 - error TS7052: Element implicitly has an 'any' type because 
 type 'AbstractControl' has no index signature. Did you mean to
 call 'get'?

  46     <ng-container *ngFor="let userFormGroup of
  usersForm.get('users')['controls']; let i=index">

---

TS 文件

public usersForm!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() :void {
    this.usersForm = this.fb.group({
      users: this.fb.array([
        this.fb.group({
          gHService: [''],
          quantity: [''],
          startTime: [''],
          endTime: [''],
          remarks: ['']         
        })
      ])
    })
  }

  removeFormControl(i: number) {
    let usersArray = this.usersForm.get('users') as FormArray;
    usersArray.removeAt(i);
  }

  addFormControl() {
    let usersArray = this.usersForm.get('users') as FormArray;
    let arraylen = usersArray.length;

    let newUsergroup: FormGroup = this.fb.group({
          gHService: [''],
          quantity: [''],
          startTime: [''],
          endTime: [''],
          remarks: [''] 
    })

    usersArray.insert(arraylen, newUsergroup);
  }
  onSubmit(){
    console.log(this.usersForm.value);
  }

模板文件

<form [formGroup]="usersForm" (ngSubmit)="onSubmit()">
    <ng-container *ngFor="let userFormGroup of usersForm.get('users')['controls']; let i=index">
      <div [formGroup]="userFormGroup">
        <label>
          Service Name:
          <input type="text" formControlName="gHService">
        </label>
        <label>
          Quantity:
          <input type="text" formControlName="quantity">
        </label>
        <label>
          Start Time:
          <input type="text" formControlName="startTime">
        </label>
        <label>
          End Time:
          <input type="text" formControlName="endTime">
        </label>
        <label>
          Remarks:
          <input type="text" formControlName="remarks">
        </label>
        <label>
          <button (click)="removeFormControl(i)">remove formGroup</button>
        </label>
      </div>
    </ng-container>
    <button type="submit">Submit</button>
  </form>
  <button (click)="addFormControl()">add new user formGroup</button>

Answer 1

正如错误状态'AbstractControl' has no index signature。您需要一种方法来通知 typescript usersForm.get('users') 返回 FormArray

在您的 TS 文件中

get userFormGroups () {
  return this.usersForm.get('users') as FormArray
}

在你的 html 中

<form [formGroup]="usersForm" (ngSubmit)="onSubmit()">
  <div formArrayName='users'>
    <ng-container *ngFor="let userFormGroup of userFormGroups.controls; let i=index">
      <div [formGroupName]="i">

          <!--Other codes here -->

注意线条

<div formArrayName='users'>

和

<div [formGroupName]="i">