找不到名称为“0”的控件

Question

我必须制作一个由一系列动态创建的复选按钮组成的表单。我受到来自网站的代码的启发，但它总是给我这个错误：“找不到名称为'0'的控件”。我该如何解决？谢谢大家！

代码打字稿：

import { Component, OnInit, Input } from '@angular/core';import { FiguraProfessionale } from 'src/app/model/FiguraProfessionale';
import { FiguraProfessionaleCompetenza } from 'src/app/model/FiguraProfessionaleCompetenza';
import { Competenza } from 'src/app/model/Competenza';
import { AssociaFiguraProfessionaleCompetenzeServiceService } from '../associa-figura-professionale-competenze-service.service';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-associa-figura-professionale-competenze',
  templateUrl: './associa-figura-professionale-competenze.component.html',
  styleUrls: ['./associa-figura-professionale-competenze.component.css']
})
export class AssociaFiguraProfessionaleCompetenzeComponent implements OnInit {

  figuraProfessionaleCompetenza: FiguraProfessionaleCompetenza;

  listaFiguraProfessionale: Array<FiguraProfessionale>;

  listaCompetenza: Array<Competenza>;

  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private servizio: AssociaFiguraProfessionaleCompetenzeServiceService, private route: Router) {
    this.form = this.formBuilder.group({
      competenzeScelte: new FormArray([])
    });
    this.figuraProfessionaleCompetenza = new FiguraProfessionaleCompetenza();
    this.listaCompetenza = JSON.parse(sessionStorage.getItem("listaCompetenza"));
    this.listaFiguraProfessionale = JSON.parse(sessionStorage.getItem("listaFiguraProfessionale"));
    this.addCheckboxes();
  }

  get competenzeFormArray() {
    return this.form.controls.competenzeScelte as FormArray;
  }

  private addCheckboxes() {
    this.listaCompetenza.forEach(() => this.competenzeFormArray.push(new FormControl(false)));
  }

  ngOnInit(): void {
  }

  inserisci() {
    const competenzeSelezionate = this.form.value.competenzeScelte
      .map((checked, i) => checked ? this.listaCompetenza[i].id : null)
      .filter(v => v !== null);
    console.log(competenzeSelezionate);
  }

}

代码 HTML：

<div class="form-group">
    <form [formGroup]="form" (ngSubmit)="inserisci()">
        <table>
            <tbody>
                <tr *ngFor="let competenza of competenzeFormArray.controls; let i = index">
                    <td><input type="checkbox" [formControlName]="[i]"></td>
                    <td>{{listaCompetenza[i].codice}} {{listaCompetenza[i].descrizione}}</td>
                </tr>
            </tbody>
        </table>
        <button class="special rounded-pill" > Inserisci </button>
    </form>
</div>

Answer 1

您忘记在 html 中添加表单数组名称。

像这样在你的 html 中添加formArrayName="competenzeScelte"。

<tr formArrayName="competenzeScelte" *ngFor="let competenza of competenzeFormArray.controls; let i = index">

它会解决你的问题。