首页 文章

如何获得被动形式的下拉选择值

提问于
浏览 次
0

我试图在响应式表单提交时发送更改事件下拉列表的选定值 . 我有一个非常类似的场景，根据how to get selected value of radio in reactive form的答案为无线电工作

这是下拉列表的代码

<div class="row" *ngIf="question.controls.type.value === 'dropdown'">
   <div class="col-md-12">
    <div class="form-group__text select">
      <label for="type">{{ question.controls.label.value }}</label>
      <br><br>
      <select name="value" formArrayName="component" (change)="updateSelection(question.controls.component.controls, $event.target)">
        <option
          *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
          [ngValue]="answer?.value?.value">
            {{answer?.value?.value}}
        </option>
      </select>
    </div>
  </div>
 </div>

我无法通过下拉列表将更改所选选项的formcontrol传递给updateSelection . 任何帮助是极大的赞赏 .

https://stackblitz.com/edit/angular-acdcac

angular-reactive-forms angular4-forms formarray formgroups

1 回答

  • 1

    非常类似于上一个问题，我们迭代数组中的表单控件，最初将all设置为 false ，然后将所选的选项转换为 true . 所以模板让我们传递 $event.target.value ：

    <select name="value" formArrayName="component" 
   (change)="updateSelection(question.controls.component.controls, $event.target.value)">
    <option *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
       [ngValue]="answer?.value?.value">
       {{answer?.value?.value}}
  </option>
</select>

    在我们提到的组件中迭代表单控件并将all设置为 false . $event.target.value 的值将是字符串值，例如 Choice 1 . 然后，我们搜索具有该值的表单控件，然后为该特定表单组设置布尔值：

    updateSelection(formArr, answer) {
  formArr.forEach(x => {
    x.controls.selectedValue.setValue(false)
  })
  let ctrl = formArr.find(x => x.value.value === answer)
  ctrl.controls.selectedValue.setValue(true)
}

    你的分叉 StackBlitz

    回复于

相关问题