Add data from a form to array an angular 2+

Question

This is my form

When entering a question, I can add as many alternatives as you wish. In action would be the button to edit alternative.

I would like my array to have this format:

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

When you click the add button you can add several alternatives, do not have a limit number

This code is what makes the alternatives appear:

<table>
    <thead><tr><th>Name</th><th>Action</th></tr>
    </thead>
    <tbody>
      <tr *ngFor="let quiz of quizes">
        <td>
          <input name="alternativa" type="text" [(ngModel)]="quiz.pergunta" [disabled]="!quiz.isEditable"/>
        </td>
        <td>
          <button (click)="quiz.isEditable=!quiz.isEditable" *ngIf="!quiz.isEditable">Edit</button>
          <button *ngIf="quiz.isEditable" (click)="quiz.isEditable=!quiz.isEditable">Save</button>
        </td>
      </tr>
    </tbody>
  </table>

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

How can I populate the array this way when I click Save to complete the question?

Form arrays is what you're looking for

user4676340
– user4676340

2019-05-24 12:50:43 +00:00
Commented May 24, 2019 at 12:50 — user4676340
– user4676340, Commented May 24, 2019 at 12:50

Khael Bubniak · Accepted Answer · 2019-05-24 13:39:41Z

1

I think your field "Alternatives" is a bit wrong, I think it should be like this:

"Alternatives: [{'test':'testAnswer'},{'test2':'test2Answer'}... ]

Then, you can iterate over alternatives with *ngFor as well

I would do something like this:

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

then, I would structure a function to add/remove the items in the inside array, maybe something like this:

public addOrRemoveItemInArray(a:boolean) {
// if a=true, add if false = remove
if (a === true) { 
let newAnswer = {"test": ""};
this.form.Alternatives.push(newAnswer);

  }
if (a=== false) { this.form.Alternatives.pop() //remove the las item
  }
else {}//just to avoid problems
}

of Course, you should update the html to iterate over 'form' new variable

edited May 24, 2019 at 13:39

answered May 24, 2019 at 13:29

Khael Bubniak

1502 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add data from a form to array an angular 2+

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related