angular - 我想在已经渲染的 Angular 组件中重用表单单选按钮元素

问题描述

我有一个案例可以从问题列表中一次显示一个问题，并带有一个单选按钮来捕获响应为是或否。

我的方法：

我正在question = "{currentId : 0, questionId : 'value', question : 'This is the question text?"}组件的打字稿代码中初始化一个 javascript 对象。

在当前组件的 HTML 模板中，我已将名称属性设置为的单选按钮设置"question.questionId"为

单击下一步按钮时，我提交表单并将数据附加到包含“[{questionId“value”，response：“true/false”}]”的响应列表中，并将问题对象的值替换为增量"question.currentId"1和从问题列表的下一个元素中获取数据。

在提交下一个问题时，我发现单选按钮元素的名称属性值对于连续问题保持不变。

我无法弄清楚为什么 name 属性中的值没有改变。但是，HTML 中问题文本的显示会随着计数的增加而变化。

请为此提供解决方案

问题.component.html：

<form class="form-horizontal" (ngSubmit)=onSubmit() #questionForm='ngForm'>
          <div class="card-body">
              <label class="col-md-12 col-form-label">{{ question.question1 }}</label>
            <div class="form-group row">

              <div class="col-md-9 col-form-label">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name= "question{{ question.questionId }}"  value="true" ngModel>
                  <label class="form-check-label" for="radio1">
                    Yes
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name= "question{{ question.questionId }}"  value="false" ngModel [ngModel] = "checked">
                  <label class="form-check-label" for="radio2">
                    No
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button type="button" class="btn btn-sm btn-success" (click) = "onPrevious()" [disabled] = "question.currentId === 0">
              <i class="fa fa-arrow-left"></i> Previous</button>
              &nbsp;
            <button type="submit" class="btn btn-sm btn-success" [disabled] = "question.currentId === questions.length">
              <i class="fa fa-arrow-right"></i> Next</button>
            <button type="button" class="btn btn-sm btn-success" style="float: right;" (click) = "submitComponentResponses()">
              <i class="fa fa-ban"></i> Submit</button>
          </div>
        </form>

问题.component.ts：

private getComponentAndQuestions() {

    this.questionService.getQuestionsData(projectAssessmentId).subscribe(q => {
      this.questions = q;
      this.question = {
        currentId: 0,
        questionId: this.questions[0].questionId,
        question1: this.questions[0].question1,
        quizId: this.questions[0].quizId
      }
    }, error => {
      this.exceptionService.errorHandler(error);
    });

  }

  onSubmit() {
    if (this.questionForm.valid) {
      let UserProjectId = this.userProject.id;
      Object.keys(this.questionForm.form.controls).forEach(
        (key) => {
          if (this.response.some((item) => item.QuesId == key)) {
            this.response.splice(this.question.currentId, 1, {
              QuesId: key,
              Response: this.questionForm.form.get(key).value,
              UserProjectId: this.userProject.id
            });
          } else {
            this.response.push({
              QuesId: key,
              Response: this.questionForm.form.get(key).value,
              UserProjectId: UserProjectId
            });
          }
        }
      );

      //Increment the current Id and reset question object to next element 
      //from array of questions.
       if (this.question.currentId < this.questions.length - 1) {
         this.setCurrentQuestion(this.question.currentId + 1);
       }
    }
  }

 private setCurrentQuestion(currId: number) {
    this.question = {
      currentId: currId,
      questionId: this.questions[currId].questionId,
      question1: this.questions[currId].question1,
      quizId: this.questions[currId].quizId
    }
  }

标签： angular

angular - 我想在已经渲染的 Angular 组件中重用表单单选按钮元素

问题描述

解决方案

推荐阅读