Question

我有一个反应式表单组件和一个输入控件。
输入控件附加到formGroup。
考虑以下对象：{Id: 1, Text: "some text here..."}。像select or dropdown一样，我想在输入中显示Text部分，但是在提交表单时发送Id部分。

下面是代码的原型：

Component.ts：

    Form = new FormGroup({Organ: new FormControl()});

component.html：

    <input formControlName="Organ" type="text" [readOnly]="true">

我也搜索了一些关键字，但获得了不相关的结果。

-------------------已编辑-------------------------- 很抱歉给您一个含糊不清的问题。
我知道select的工作方式。但是我希望将一个简单的只读输入文本框以编程方式附加到值为{Id: 1, Text: "some text here..."}并在其中显示相应的文本，但在内部将ID保存到它的formControl中。例如，假设一个datepicker的文本表示形式为“ 1980-02-03”，但是当您记录表单值：console.log(this.form.value)时，它将显示该表示的文本的data对象。收获！我不想创建日期选择器或选择器。 我想知道如何设置自定义对象的文本表示形式，所以我更改了问题主题。

Answer 1

如果一组有效输入是有限的，并且可以表示为public String getIgnoreCase(JSONObject obj, String key) { Iterator<String> itr = obj.keySet().iterator(); while (itr.hasNext()) { String key1 = itr.next(); if (key1.equalsIgnoreCase(key)) { return obj.get(key1); } } return null; }的数组，则必须使用select。输入是针对自由文本的，可以使用某些功能进行验证，但是表单值始终是输入中输入的文本。如果需要魔术，可以随时创建自己的自定义控件。

Answer 2

我想这就是您想要的：

组件：

arr2.splice(n, 0, arr1);
return arr2

模板：

export class AppComponent  {
  options = [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}];
  form = new FormGroup({Organ: new FormControl()});

  onSubmit() {
    console.log(this.form.value);
  }
}

因此，您在显示<form [formGroup]="form" (submit)="onSubmit()"> <select formControlName="Organ"> <option *ngFor="let option of options" [value]="option.id">{{option.text}}</option> </select> <button>SUBMIT</button> </form>属性的同时将id属性绑定为表单控件值。 https://stackblitz.com/edit/angular-iuljdu

如何设置自定义对象的文本表示

2 个答案: