Início / coding / Perguntas / 79558328
Accepted
Vihung
Asked: 2025-04-06 22:32:10 +0800 CST

Usando o Angular 18, como posso ter um formulário reativo com um array de controles de formulário de texto?

  • 772

No meu componente Angular, tenho um Foocom uma propriedade barque é um array de strings.

Quero editar a lista de linhas de texto no meu formulário. No meu componente, declaro

  barEditForm = new FormGroup({
    bar: new FormArray<FormControl>([])
  });

Inicializo então meu formulário a partir do Fooque carreguei.

  foo.bar.forEach((bar: string) => {
    this.barEditForm.controls.bar.push(new FormControl(bar));
  });

Como posso criar um formcom um inputfor each barno meu modelo HTML?

Esse;

  <form [formGroup]="barEditForm" (ngSubmit)="onBarSave(foo.id)">
    @for (bar of barEditForm.controls.bar.controls; track $index) {
      <input class="form-control" id="bar" type="text" formControlName="$index"/>
    }
  </form>

não funciona!

Presumo que preciso iterar sobre meus controles criados, daí o forde barEditForm.controls.bar.controls.

Também presumo que posso usar $indexcomo nome do controle do formulário.

Mas recebo um erro ERROR TypeError: e is nulle uma entrada de texto vazia.

Qual é a maneira correta de fazer isso?

angular

1 respostas

  1. Best Answer

    Você precisa definir formArrayNamecomo bar, depois definir o formControlName com a vinculação de propriedade.

    <form [formGroup]="barEditForm" (ngSubmit)="onBarSave(foo.id)">
    <div formArrayName="bar">
      @for (bar of barEditForm.controls.bar.controls; track $index) {
        <input class="form-control" [id]="'control' + $index" type="text" [formControlName]="$index"/>
    }
    </div>
  </form>

    Outra opção é usar formControl com vinculação de propriedade que não use $index

    <form [formGroup]="barEditForm" (ngSubmit)="onBarSave(foo.id)">
    <div formArrayName="bar">
      @for (control of barEditForm.controls.bar.controls; track $index) {
        <input class="form-control" [id]="'control' + $index" type="text" [formControl]="control"/>
    }
    </div>
  </form>
    • 1

relate perguntas