Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

messageList正在通过我创建的模拟更新，如下所示

＆＃13;

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
    },
]

＆＃13;

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

＆＃13;

我得到的输出如下： output image 1

output image 2

这里的问题是，每当我按下任一表格的提交按钮时，即使这些表格都被提交，如果＆＃34;如果＆＃34; doSubmit（）方法中的条件只满足一个，并且即使doSubmit中的console.log打印传递给doSubmit方法的正确的msg值，两个轮询也会获得isAnswered为true。任何人都可以指导我走向正确的方向吗？

如何在Angular 4和ionic 3中使用动态formControlName？

0 个答案: