在Angular 4中获取反应形式值

Question

我在Ionic项目中使用反应形式。我有多张幻灯片，每张幻灯片都有一个表格。但是，当我尝试检索该值时，便得到了第一个幻灯片值。我想获取活动幻灯片的值。如果所有幻灯片的类型不同（例如mf，mr，mc，it），都可以正常工作，如果所有幻灯片都相同，就会出现问题。

我使用幻灯片的代码

    <ion-slides #slides (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let quiz of quizData.quizzes">
      <div [ngSwitch]="quiz.questionType">
        <mf *ngSwitchCase="'Match The Following'" [data]=quiz></mf>
        <mr *ngSwitchCase="'Multiselect'" [data]=quiz></mr>
        <mc *ngSwitchCase="'Select one'" [data]=quiz></mc>
        <it *ngSwitchDefault [data]=quiz></it>
      </div>
    </ion-slide>
  </ion-slides>

以上模板的组件

getFormValues(index){
    let questionType = this.quizData.quizzes[index].questionType
    switch(questionType){
      case 'Select one':
        this.mc.getFormValue()
        this.datas.splice(index, 1, this.mc.selectedData)
        break

      case 'Multiselect':
        this.mr.getFormValue()
        this.datas.splice(index, 1, this.mr.selectedData)
        break

      case 'Match The Following':
        this.mf.getFormValue()
        this.datas.splice(index, 1, this.mf.selectedData)
        break

      default:
        this.it.getFormValue()
        this.datas.splice(index, 1, this.it.selectedData)
        break
    }
  }

活动表单模板

<form [formGroup]="mc">
            <ion-input type="hidden" formControlName="id" value="{{data.questionId}}"></ion-input>
            <ion-list radio-group formControlName="selectedValue">      
              <ion-item *ngFor="let option of data.options;let i=index;">
                <ion-label>{{option}}</ion-label>
                <ion-radio mode="md" value="{{s_alphabet[i]}}" slot="start" item-left></ion-radio>
              </ion-item>
            </ion-list>
          </form>

表单组件

export class McComponent {

  @Input() data : any;
  private mc: FormGroup
  selectedData: any
  s_alphabet = 'ABCDEFGHIJ'.split('')

  constructor(private formBuilder: FormBuilder) {
    this.mc = this.formBuilder.group({
      id: [''],
      selectedValue: ['']
    })
  }

  ionViewDidLoad(){
    this.mc.controls['id'].setValue(this.data.questionId)
  }

  ionViewWillLeave(){
    console.log(this.mc.value)
  }

  getFormValue(){
    console.log("inside mc value..")
    console.log(this.mc.value)
    this.selectedData = this.mc.value
  }
}

请为此提出建议。

Answer 1

如果您不打算使用验证，请忘记formcontrol和组，您将可以使用ngModel作为常规数据绑定。将简化您的代码。