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

Question

我在Angular表单组中有一个选择字段，我想在用户选择的<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>

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

COMPONENT.TS

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

Answer 1

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