Question

我无法理解为什么“简单”的ngModel表单无法按照资源建议的那样运行。

该表单包含一系列多重（单选按钮）问题的测验。生成测验时，我的模板中的表单元素会正确填充，例如输入每个问题选项的值属性，以及与每个问题关联的一些隐藏字段。但是在提交时，没有选择的选项被“记录” - 只提交了元素名称。

然后我读到每个元素都需要添加ngModel。但是当我这样做时，价值属性根本没有填充。

我的模板是：

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

提交表单会触发此功能：

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

我正在将'FormsModule'和'NgForm'导入到组件中。

我想第一个问题是为什么每个无线电输入和隐藏输入元素中存在'ngModel'会对这些元素产生负面影响。第二个问题是如何获得要提交的值（但是，一旦处理完第一个问题，对该问题的需求可能会消失）。

感谢/汤姆

表单元素未在Angular 2+和ngModel格式

0 个答案: