Zoeken op website

typescript - Hoe gebruik je dynamische formControlName in Angular 4 en Ionic 3?


Ik ben nieuw in Ionic en Angular (of eigenlijk ook in JavaScript). Ik probeer dynamische formulieren te maken in mijn berichtgeving-app waarbij de gebruiker vragenlijsten beantwoordt die door de server worden verzonden. Mijn HTML- en TypeScript-fragmenten zijn als volgt.

initForm() {

  // this.pollForm = this.formBuilder.group({
  //   question: '',
  //   options: '',
  //   polls: this.formBuilder.array([ this.createPoll() ])
  // });

  // let allPolls: FormArray = new FormArray([]);
  // for (let i = 0; i < this.messageList.length; i++){
  //   let formGroup = new FormGroup({});
  //   if (this.messageList[i].isPoll){
  //     formGroup.addControl(String(this.messageList[i].messageId), new FormControl(false));
  //     allPolls.push(formGroup);
  //   }

  this.pollForm = this.addNewPoll();
}

addNewPoll() {
  let formGroup = new FormGroup({});
  for (let i = 0; i < this.messageList.length; i++) {
    if (this.messageList[i].isPoll) {
      formGroup.addControl(String(this.messageList[i].messageId), new FormControl(true));
    }
  }
  return formGroup;
}

doSubmit(msg: Message) {
  // console.log(msg);
  // console.log(this.messageList[this.messageList.length-1]);
  // console.log(this.pollForm.get(String(msg.messageId)));
  // console.log(this.pollForm.get(String(this.messageList[this.messageList.length-1].messageId)));
  if (this.pollForm.get(String(msg.messageId)).touched) {
    console.log('Submitting form', this.pollForm.get(String(msg.messageId)).value);
    //this.pollAnswer = this.pollForm.value.options;
    msg.poll.isAnswered = true;
  }
}
<ion-content>

    <div class="message-wrap">
        
      <div *ngFor="let msg of messageList; let i = index"
            class="message"
            [class.left]="!(msg.fromUserId === currentUser.userId )"
            [class.right]=" msg.fromUserId === currentUser.userId ">
          <!-- <img class="user-img" [src]="msg.userAvatar" alt="" src="">
          <ion-spinner name="dots" *ngIf="msg.status === 'pending'"></ion-spinner> -->
          <div class="msg-detail">
              <div class="msg-info">
                  <p>
                      {{msg.fromUserId}}&nbsp;&nbsp;{{msg.messageTime}}</p>
              </div>
              <div class="msg-content">
                  <span class="triangle"></span>
                  <p class="line-breaker" *ngIf="!(msg.isImage) && !(msg.isPoll)">{{msg.messageContent}}</p>
                  <img *ngIf='msg.isImage && !msg.isPoll' class="line-breaker" src="{{msg.imageBase64}}">
                  <div *ngIf="msg.isPoll && msg.poll.pollType=='single'">

                    <form [formGroup]="pollForm">
                        <ion-list radio-group [formControlName]='msg.messageId'>

                          <ion-list-header>
                              {{msg.poll.pollQuestion}}
                              <div *ngIf='msg.poll.isAnswered'>
                              <br> <br>
                              {{pollAnswer}}
                            </div>
                          </ion-list-header>

                            <ion-item *ngFor='let option of msg.poll.pollOptions'>
                                <ion-label>{{option}}</ion-label>
                                <ion-radio [disabled]='msg.poll.isAnswered' 
                                checked="false" value={{option}}></ion-radio>
                            </ion-item>
                            <button [disabled]='msg.poll.isAnswered' ion-button
                            block clear (click)='doSubmit(msg)'>Submit</button>
                          
                        </ion-list>
                      </form>
                  </div>
              </div>
          </div>
      </div>
    </div>

</ion-content>

messageList wordt bijgewerkt via mocks die ik heb gemaakt, die als volgt zijn

import { MOCK_POLLS } from "./polls.mock";
import { Message } from "./../models/message.interface";
export const MOCK_MESSAGE : Message[] = [
    {
        messageId: Date.now(),
        messageContent: "Welcome to our app",
        messageTime: Date.now(),
        fromUserId: 4321,
        toUserId: 1234,
        isImage: false,
        isPoll: false
    },
    {
        messageId: Date.now()+10,
        messageTime: Date.now(),
        fromUserId: 4321,
        toUserId: 1234,
        isImage: false,
        isPoll: true,
        poll: MOCK_POLLS
    },
    {
        messageId: Date.now()+11,
        messageTime: Date.now(),
        fromUserId: 4321,
        toUserId: 1234,
        isImage: false,
        isPoll: true,
        poll: MOCK_POLLS
    },
]

import { Poll } from './../models/poll.interface';

const MOCK_POLL_OPTIONS : string[] = [
    'Yes',
    'No',
    'No idea'
]

export const MOCK_POLLS : Poll = {
    pollId: 123456789,
    pollQuestion: "Do you like the current song?",
    pollOptions: MOCK_POLL_OPTIONS,
    isAnswered: false,
    pollType: 'single'
}

De uitvoer die ik krijg is als volgt: uitvoerafbeelding 1

uitvoerafbeelding 2

Het probleem hier is dat, telkens wanneer ik op de verzendknop van een van de formulieren druk, beide formulieren worden verzonden, ook al wordt de "if"-voorwaarde in de doSubmit()-methode alleen door één formulier voldaan, en beide polls krijgen isAnswered als true, ook al print console.log in doSubmit de juiste waarde van msg die aan de doSubmit-methode wordt doorgegeven. Kan iemand mij alsjeblieft de juiste richting wijzen?