0

I'm having trouble understanding why a "simple" ngModel form is not functioning as the resources suggests it should.

The form holds a quiz with a series of multichoice (radio button) questions. When the quiz is generated, the form elements in my template are correctly populated e.g. the value attribute for each question option is entered as are some hidden fields associated with each question. But when submitted, none of the selected options were 'recorded' - just the element names were submitted.

I then read that each element need to have ngModel added to it. But when I did that, the value attributes were not populated at all.

My template is: 

  <form id="quizForm" #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">                       
            <div *ngFor="let item of aData; let i=index">
              <div class="qunit">
                <p class="question"><strong>Question {{i+1}}.</strong>  <span [innerHTML]="item['question'] | keepHtml"></span></p>

                <ul class="phoriz nobullet">
                  <li class='mcqoptions' *ngFor="let mcq of item.mcq">
                    <label>
                      <input ngModel type="{{item['qtype']}}" class="rightpad" name="option{{i}}" [value]="mcq['mcqID']"><span [innerHTML]="mcq['mcqoption'] | keepHtml"></span>
                    </label>
                  </li>
                </ul>
                <p id="qfb{{item['questionID']}}" class="quizfback"></p>
                <input ngModel type="hidden" name="noptions{{i}}" value="4"  />
                <input ngModel type="hidden" name="questionID{{i}}" value="{{item['questionID']}}"/>
                <input ngModel type="hidden" name="qType{{i}}" value="{{item['quizquestiontypeID']}}" />
              </div>
            </div>
                  <div style="padding:20px 0" class="form-group">
              <div class="col-sm-12 controls">
                <button type="submit" class="btn btn-success">Submit this quiz</button>
              </div>
            </div>
          </form>

Submitting the form triggers this function:

  onSubmit(f):void{    
       console.log(f);
   }

I am importing 'FormsModule' and 'NgForm' into the component.

I guess the first question is why is the presence of 'ngModel' in each radio input and hidden input element negatively impacting on those elements. The second question is how do I get the values to be submitted (but perhaps the need for that question will disappear once the first one is dealt with).

Thanks/Tom

TomBaine
  • 761
  • 2
  • 11
  • 19
  • try this way: [(ngModel)]="item.questionID" – omeralper Oct 16 '17 at 09:21
  • Thanks, that format works for the hidden fields. But not for the radio button fields. For a given set of 4 multichoice options, I get weirdness of this type: " where 7334 appears as the value in all 4 options while the ng-reflect-model value is the correct value. All up, the end result is that the radio buttons no longer act as unique radio buttons, but as checkboxes. – TomBaine Oct 16 '17 at 09:53
  • I guess you either set all the radio buttons to same ngModel object or all radio buttons have same name property. – omeralper Oct 16 '17 at 13:13

0 Answers0