错误 TS7052:元素隐式具有“any"类型，因为“AbstractControl"类型没有索引签名.你的意思是叫'get'吗? [英] error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

问题描述

<块引用>

 错误 TS2531:对象可能为空".46 <ng-container *ngFor="let userFormGroup ofusersForm.get('users')['controls'];让 i=index">46:48 - 错误 TS7052:元素隐式具有任何"类型，因为'AbstractControl' 类型没有索引签名.你的意思是叫得到"?46 <ng-container *ngFor="let userFormGroup ofusersForm.get('users')['controls'];让 i=index">

---

TS 文件

public usersForm!: FormGroup;构造函数(私人FB:FormBuilder){}ngOnInit() :void {this.usersForm = this.fb.group({用户:this.fb.array([这个.fb.group({gHService: [''],数量: ['']，开始时间: ['']，时间结束: ['']，评论: ['']})])})}removeFormControl(i: number) {让 usersArray = this.usersForm.get('users') as FormArray;usersArray.removeAt(i);}addFormControl() {让 usersArray = this.usersForm.get('users') as FormArray;让 arraylen = usersArray.length;let newUsergroup: FormGroup = this.fb.group({gHService: [''],数量: ['']，开始时间: ['']，时间结束: ['']，评论: ['']})usersArray.insert(arraylen, newUsergroup);}提交(){console.log(this.usersForm.value);}

模板文件

<ng-container *ngFor="let userFormGroup of usersForm.get('users')['controls'];让 i=index"><div [formGroup]="userFormGroup"><标签>服务名称:<输入类型=文本"formControlName=gHService"><标签>数量:<输入类型=文本"formControlName=数量"><标签>开始时间:<输入类型=文本"formControlName=开始时间"><标签>时间结束:<输入类型=文本"formControlName=endTime"><标签>评论:<输入类型=文本"formControlName=备注"><标签><button (click)=removeFormControl(i)">remove formGroup</button>

</ng-容器><button type="submit">Submit</button></表单><button (click)="addFormControl()">添加新用户表单组</button>

解决方案

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

在您的 TS 文件中

get userFormGroups() {返回 this.usersForm.get('users') 作为 FormArray}

在你的 html 中

<div formArrayName='users'><ng-container *ngFor="let userFormGroup of userFormGroups.controls;让 i=index"><div [formGroupName]=i"><!--这里的其他代码-->

注意线条

和

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>

解决方案

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

这篇关于错误 TS7052:元素隐式具有“any"类型，因为“AbstractControl"类型没有索引签名.你的意思是叫'get'吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！