Question

我在Angular反应式窗体中有一个选择字段，我想在用户选择的<option>标记内提取文本值，然后在输入中动态填充其值（例如发生更改事件时）< / p>

COMPONENT.HTML

                   <div class="form-group">
                        <label>Select Plant</label>
                        <select class="form-control" formControlName="plantId" name="plantId" id="plantId">
                          <option [ngValue]="1">ABC</option>
                          <option [ngValue]="2">XYZ</option>  
                        </select>
                        <app-control-messages [control]="storlocForm.get('plantId')"></app-control-messages>
                    </div>
                    <div class="form-group">
                        <label>Plant Name *</label>
                        <input id="plantName" class="form-control" type="text" formControlName="plantName" name="plantName" value="" />
                    </div>

假设用户从下拉菜单中选择XYZ，我希望在以下输入（plantName）中填充值“ XYZ”而不是值“ 2”。

COMPONENT.TS

this.storlocForm = this.formBuilder.group({
      plantId: ['', Validators.required],
      plantName: ['']
    });
}

Answer 1

只需将change事件添加到select元素并更新如下所示的formcontrol。

<select class="form-control" formControlName="plantId" name="plantId" id="plantId" (change)="update($event)">
                 <option [ngValue]="1">ABC</option>
                          <option [ngValue]="2">XYZ</option>  
                </select>

update(event): void {
        let plantName = event.target.options[event.target.options.selectedIndex].text;
        this.form.controls.plantName.setValue(plantName);
    }

Answer 2

您必须为数组使用键值对，因此用户{key：“ XYZ”，值：“ XYZ”}，{key：“ ABC”，值：“ ABC”}

如何在Angular Reactive Forms的另一个输入中获取选择选项文本

2 个答案: