如何在 Angular 响应式表单中的另一个输入中获取 select 选项文本

Question

我的 Angular 响应式表单中有一个 select 字段，我想提取用户 select 和 <option> 标签内的文本值然后在输入中动态填充它的值（如更改事件）

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>

假设如果用户 selects XYZ 来自下拉列表，我希望在以下输入 (plantName) 中填写值 "XYZ" 而不是值“2”。

COMPONENT.TS

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

Answer 1

您必须为数组使用键值对，因此用户 {key : "XYZ", value: "XYZ"},{key:"ABC", value: "ABC"}

Answer 2

只需将更改事件添加到 select 元素并更新表单控件，如下所示。

<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);
    }

如何在 Angular 响应式表单中的另一个输入中获取 select 选项文本

How to fetch select option text inside another input in Angular Reactive Forms

onchange

angular

angular-reactive-forms

angular-forms

formgroups