Соберите много данных из угловой формы - PullRequest
Новая
       34

Соберите много данных из угловой формы

0 голосов
/ 05 мая 2019

Мне нужно собрать все ответы, которые пользователь выбирает в форме.

Идея состоит в том, что я создаю серию ионных элементов из объекта, через который я прохожу. Теперь мне нужно контролировать ответы пользователя и как-то сохранять эти ответы. Для этого я должен всегда знать, что для объекта [n] какой из двух вариантов помечен. 

<form (submit)="doSubmitAnswer(????????)">
        <ion-list text-wrap radio-group *ngFor="let Quest of navParams.data.question">
          <ion-list-header>
            {{Quest.statement}}
          </ion-list-header>
          <ion-item *ngIf="Quest.answer1 !== undefined">
            <ion-label >{{ Quest.answer1 }}</ion-label>
            <ion-radio  value="{{ Quest.answer1 }}" checked="false"></ion-radio>
          </ion-item>
          <ion-item *ngIf="Quest.answer2 !== undefined">
              <ion-label >{{ Quest.answer2 }}</ion-label>
              <ion-radio  value="{{ Quest.answer2 }}" checked="false"></ion-radio>
       </ion-list>
<button ion-button full type="submit" id="click">ENVIAR</button>
</form>

Идея состоит в том, чтобы получить что-то вроде этого [answer1, answer1, answer2, answer2, answer1, ...], чтобы я мог работать с этой информацией.

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

После поиска в Интернете и прочтения нескольких постов о Angular и *ngFor я видел, что вы можете перебирать две переменные. Поэтому я создаю переменную i, и когда я нажимаю на item, я вызываю функцию, которая отвечает за сохранение информации в vector. 

<ion-list text-wrap radio-group *ngFor="let Quest of navParams.data.question; let i =index">
      <ion-item *ngIf="Quest.answer1 !== undefined">
        <ion-label >{{ Quest.answer1 }}</ion-label>
        <ion-radio  (click)="saveanswer(Quest.answer1,i)" checked="false"></ion-radio>
      </ion-item>
      <ion-item *ngIf="Quest.answer2 !== undefined">
        <ion-label >{{ Quest.answer2 }}</ion-label>
        <ion-radio  (click)="saveanswer(Quest.answer2,i)" checked="false"></ion-radio>
      </ion-item>
</ion-list>
0 голосов
/ 05 мая 2019

В вашем случае вы можете использовать Реактивные формы . Реактивные формы создают двустороннюю привязку между вашим представлением и моделью, поэтому каждый раз, когда вы изменяете какие-либо входные данные в своем представлении, ваш соответствующий объект автоматически изменяется.

Чтобы дать вам представление, в вашем случае это будет примерно так:

В вашем компоненте: 

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class SampleComponent {
  yourForm = new FormGroup({
    firstSegment: new FormGroup({
      firstAnswer: new FormControl(''),
      secondAnswer: new FormControl('')
    }),
    secondSegment: new FormGroup({
      firstAnswer: new FormControl(''),
      secondAnswer: new FormControl('')
    })
  });
}

А по вашему мнению: 

<form [formGroup]="yourForm" (ngSubmit)="onSubmit(yourForm.value)">
  <div formGroupName="firstSegment"> 
    <label>
      Question 1:
      <input type="text" formControlName="firstAnswer">
    </label>

    <label>
      Question 2:
      <input type="text" formControlName="secondAnswer">
    </label>
  </div>

  <div formGroupName="secondSegment"> 
    <label>
      Question 1:
      <input type="text" formControlName="firstAnswer">
    </label>

    <label>
      Question 2:
      <input type="text" formControlName="secondAnswer">
    </label>
  </div>
</form>

Вы можете получить доступ к каждому элементу управления вашей формы, используя

this.yourForm.get("yourControlName").value

за использование их в ваших if заявлениях

Таким образом, все ваши ответы будут автоматически сохраняться в вашей форме, и вы сможете получить доступ ко всем данным формы, используя

yourForm.value

Подробнее о реактивных формах здесь

Также посмотрите на вложенные формы здесь

...