2

我是 ionic 和 Angular 的新手（或者就此而言，也是 JavaScript 的新手）。我正在尝试在我的消息传递应用程序中实现动态表单，用户将在其中回答服务器发送的民意调查。我的 HTML 和 TypeScript 片段如下。

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 正在通过我创建的模拟进行更新，如下所示

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'
}

我得到的输出如下： 输出图像1

输出图像 2

这里的问题是，每当我按下任一表单的提交按钮时，即使只有一个满足 doSubmit() 方法中的“if”条件并且两个投票都得到 isAnswered 为 true，即使 console.log 两个表单都被提交在 doSubmit 中打印传递给 doSubmit 方法的 msg 的正确值。谁能指导我正确的方向？

4

0 回答 0