1

Basicamente tenho dois arrays, e gostaria de salvar o valor deles ao mesmo tempo no *ngFor, fiz apenas como teste algo desta forma:

<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
        <mat-form-field appearance="standard" class="fullSize">
          <mat-label>Titulo</mat-label>
          <input [formControlName]="i" type="text" matInput id="field_{{i}}" autocomplete="off"
            placeholder="Titulo">
        </mat-form-field>
</div>

 <div formArrayName="alternativeFieldsValues" *ngFor="let value of alternativeFieldsValues.controls; let i = index">
          <mat-form-field appearance="standard" class="fullSize">
              <mat-label>Conteúdo</mat-label>
              <input [formControlName]="i" type="text" matInput id="value_{{i}}" autocomplete="off"
                placeholder="Conteúdo deste campo">
          </mat-form-field>
  </div>

e tenho essa função que coloca esses campos no HTML

 addAlternativeField() {
    this.alternativeFields.push(this.fbuilder.control(''));
    this.alternativeFieldsValues.push(this.fbuilder.control(''));
  }

o problema obvio é que a tupla TITULO/VALOR que era o que eu queria não vai ficar correta, na primeiro execução iria ficar algo assim:

Execução 1

Porém ao chamar novamente essa função, o resultado será este:

Execução 2

Gostaria de saber como manter o formato desejado(TITULO/CONTEUDO) sem ocorrer esse problema, visto que não encontrei uma forma de manusear os vetores num mesmo *ngFor

Visto o comentário de @cezar fiz algo deste tipo:

<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
        <div [formGroupName]="i">
          <mat-form-field appearance="standard" class="fullSize">
            <mat-label>Titulo</mat-label>
            <input formControlName="alternativeFields" type="text" matInput autocomplete="off"
              placeholder="Titulo">
          </mat-form-field>
          <mat-form-field appearance="standard" class="fullSize">
            <mat-label>Conteúdo</mat-label>
            <input formControlName="alternativeFieldsValues" type="text" matInput autocomplete="off"
              placeholder="Conteúdo deste campo">
          </mat-form-field>
        </div>
      </div>

Porém tenho o seguinte erro no console:

ERROR Error: Cannot find control with path: 'alternativeFields -> 0 -> alternativeFields'
    at _throwError (forms.js:2144)
    at setUpControl (forms.js:2052)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
    at checkAndUpdateDirectiveInline (core.js:22095)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)

Aparentemente ele diz que não está definido no form, o que na realidade está:

this.form = this.fbuilder.group({
      index: [''],
      id: [''],
      name: ['', Validators.required],
      value: ['', Validators.required],
      title: ['', Validators.required],
      description: [''],
      alternativeFields: this.fbuilder.array([]),
      alternativeFieldsValues: this.fbuilder.array([])
    });

Alguma dica?

7
  • 1
    Cara, você deveria incluir esses dois valores na mesma array, ou uma gambiarra que é acessar a segunda array pelo index do primeiro *ngFor, mas confesso que não tenho certeza se funciona
    – cezar
    Commented 29/07/2019 às 16:51
  • Tem alguma ideia de como fazer segunda? Tecnicamente esses arrays tem sempre o mesmo tamanho, então isso não seria um problema. Commented 29/07/2019 às 16:52
  • alligator.io/angular/reactive-forms-formarray-dynamic-fields/… => this.alternativeFieldsValues.constrols[index]...
    – cezar
    Commented 29/07/2019 às 17:00
  • junta essas duas, se ir por esse caminho, esse cara vai voltar para ter pegar mais pra frente, ctz..
    – cezar
    Commented 29/07/2019 às 17:01
  • vou ver aqui qual a melhor opção, de qualquer jeito, dessa forma ai do link que você enviou ele não consegue achar meu control, mesmo estando declarado no Typescript, meio estranho kkk Commented 29/07/2019 às 17:09

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .