如何以反应形式获取下拉列表的选定值 [英] how to get selected value of dropdown in reactive form

问题描述

我正在尝试获取要在响应表单提交时发送的更改事件下拉列表的选定值.根据 如何以反应形式获取电台的选定值

这是下拉菜单的代码

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

在更改下拉列表中的选定选项时，我无法将答案作为 formcontrol 传递给 updateSelection.非常感谢任何帮助.

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

解决方案

和上一个问题非常相似，我们迭代你数组中的表单控件，初始设置为 false，然后将选择的选择为 true.所以模板让我们通过 $event.target.value:

<option *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"[ngValue]="answer?.value?.value">{{answer?.value?.value}}</选项></选择>
并且在我们提到的组件中迭代表单控件并将所有设置为false.$event.target.value 的值将是字符串值，例如 Choice 1.然后我们搜索具有该值的表单控件，然后为该特定表单组设置布尔值:
updateSelection(formArr, answer) {formArr.forEach(x => {x.controls.selectedValue.setValue(false)})让 ctrl = formArr.find(x => x.value.value === answer)ctrl.controls.selectedValue.setValue(true)}
你的分叉 StackBlitz
I am trying to get the selected value of the dropdown on change event to be sent on reactive form submission. I have a very similar scenario working for radio based on the answer from how to get selected value of radio in reactive form

Here's the code for dropdown
<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>
I am not able to pass the answer as formcontrol to updateSelection on change of a selected option from the dropdown. Any help is greatly appreciated.

https://stackblitz.com/edit/angular-acdcac
解决方案
Very similarily like previous question, we iterate the form controls in your array, initially set all as false, and then turn the chosen choice as true. So template let's pass $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>
And in the component we as mentioned iterate the form controls and set all as false. The value for $event.target.value will be the string value, for example Choice 1. We then search for the form control that has that value and then set the boolean for that particular formgroup:
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)
}
Your forked StackBlitz

                        
这篇关于如何以反应形式获取下拉列表的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆