Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Adicionar dados de um formulário em um array angular 2

Referente ao curso Angular parte 2: Autenticação, Forms e lazy loading, no capítulo Registro de novos usuários e atividade Submissão dos dados

por Guilherme Pereira
| 29.3k xp | 3 posts

Tenho o seguinte formulário

Ao lado de alternatives terá um botão adicionar, na qual poderá adicionar quantas alternativas quiser. E abaixo do formulário um botão salvar, que irá salvar a pergunta.

Estou com dificuldade para deixar o array com esse formato, não sei como fazer

<form [formGroup]="formulario" (ngSubmit)="onSubmit()">  
  <div class="ui-g-12 ui-fluid">
    <h2>Cadastro</h2>
  </div>

  <div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
    <span class="ui-float-label">
      <textarea id="descricao" type="text" size="30" pInputText></textarea> 
      <label for="descricao">Question</label>
    </span>    
    <!-- <small *ngIf="formProduto.get('descricao').errors?.required" class="aviso"> Preencha a descrição do produto </small>   -->
    <!-- <small *ngIf="formQuiz.get('pergunta').errors?.required" class="espacamento-baixo aviso"> Preencha a pergunta</small> -->
  </div>

  <div class="ui-g-3 ui-md-3 ui-lg-3 ui-fluid espacamento-baixo">
    <span class="ui-float-label">
      <input  id="alternativas" type="text" size="30" pInputText class="espacamento" > <!--[emitSelected]="apelido"-->
      <label for="alternativas">Cod</label>
    </span>
    <!-- <small *ngIf="formQuiz.get('pergunta').errors?.required" class="espacamento-baixo aviso"> Preencha a pergunta</small> -->
  </div>

  <div class="ui-g-3 ui-md-3 ui-lg-3 ui-fluid espacamento-baixo">
    <span class="ui-float-label">
      <input  id="alternativas" type="text" size="30" pInputText class="espacamento" > <!--[emitSelected]="apelido"-->
      <label for="alternativas">Value</label>
    </span>
    <!-- <small *ngIf="formQuiz.get('pergunta').errors?.required" class="espacamento-baixo aviso"> Preencha a pergunta</small> -->
  </div>

  <div class="ui-g-10 ui-md-10 ui-lg-10 ui-fluid espacamento-baixo">
    <span class="ui-float-label">
      <input  id="alternativas" type="text" size="30" pInputText class="espacamento" > <!--[emitSelected]="apelido"-->
      <label for="alternativas">Alternatives</label>
    </span>
    <!-- <small *ngIf="formQuiz.get('pergunta').errors?.required" class="espacamento-baixo aviso"> Preencha a pergunta</small> -->
  </div>

  <div class="ui-g-2 ui-md-2 ui-lg-2 ui-fluid espacamento-baixo">
    <p-button label="ADD"></p-button>
  </div>

{
"Question": "Question test",
"cod" : "pw3"
"Value" : "10"
  "Alternatives": [
    {
      "test": "test",
      "test2": "test",
      "test3": "test"
    },
  ]
}

Eu sei que tem haver com FormArray mas não entendi como é feito

4 respostas
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Guilherme, tudo bem? Você precisa fazer algumas modificações para funcionar e sim, é o FormArray que resolve esse problema.

Basicamente precisa criar um form sendo que um dos itens será o array.

ngOnInit() {
    this.myForm = this.builder.group({
        people: this.builder.array([this.createPerson()]),
    })
}

createPerson(): FormGroup {
    return this.builder.group({
        name: ['', Validators.required],
        age: ['', Validators.required],
        address: ['', Validators.required],
    })
}

Dessa maneira, estou iniciando o formulário com apenas uma pessoa, ai no template precisa fazer um for:

<form [formGroup]="myForm" (submit)="save()">
    <div formArrayName="people" *ngFor="let person of myForm.get('people').controls; let i = index;">
        <div [formGroupName]="i">
            <input formControlName="name" placeholder="Name..." type="text">
            <input formControlName="age" placeholder="Age..." type="number">
            <input formControlName="address" placeholder="Address..." type="text">
        </div>
    </div>
    <button (click)="addNewPerson()" type="button">Add Person</button>
    <button type="submit">Save</button>
</form>

Caso você submeta, criei uma função apenas para logar os valores do form:

public save(): void {
    console.log(this.myForm.getRawValue())
}

E por fim, tem a função para adicionar novos campos no formulário:

public addNewPerson(): void {
    this.people = this.myForm.get('people') as FormArray
    this.people.push(this.createPerson())
}

E segue os dois atributos da classe:

public myForm: FormGroup
public people: FormArray

Espero ter ajudado.

por Guilherme Pereira
| 29.3k xp | 3 posts

Muito obrigado, era exatamente o que eu precisava

por Guilherme Pereira
| 29.3k xp | 3 posts

Só não consegui adicionar novos campos no formulário com o código que vc mandou, talvez eu tenha esquecido de algo.

Então encontrei esse código e deu certo, vou deixar aqui caso mais alguém tenha algum problema

addAlternativa2() {
    const control = <FormArray>this.formQuiz.controls['alternativas'];
    control.push(this.initAlternativa());
  }
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Guilherme, poxa, que estranho não ter dado certo.

Mas, fico feliz que tenha conseguido resolver.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.