Question

我需要收集用户在表单中选择的所有答案。

这个想法是我从正在经历的物体中创建一系列离子项目。现在，我需要控制用户的响应，并以某种方式保存这些响应。为此，我必须始终知道为对象[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，...]的信息，这样我就可以使用此信息。

有什么建议吗？

Answer 1

根据您的情况，您可以使用活动表格。反应形式在视图和模型之间创建了两种绑定方式，因此，只要您更改视图中的任何输入，相应的对象就会自动更改。

要给您一个想法，您的情况将是这样的：

在您的组件中：

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

有关反应式here的更多信息

还可以查看嵌套表格here

Answer 2

在网络上搜索后，阅读了有关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>

从Angular表单收集大量数据

2 个答案: