Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.8k views
in Technique[技术] by (71.8m points)

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

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 File

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);
  }

Template File

<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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

As the error states 'AbstractControl' has no index signature. You need a way to inform typescript that usersForm.get('users') returns a FormArray

In your TS File

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

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

Note the lines

<div formArrayName='users'>

And

<div [formGroupName]="i">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...