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

我有一个反应式表单组件和一个输入控件。
输入控件已附加到formGroup。
考虑这个对象：<代码> {ID：1，文本：“这里的一些文本…} < /COD>。像

选择或下拉列表

一样，我想在输入中显示

文本

部分，但在表单提交时发送

Id

部分

下面是代码的原型：

组件1.ts：

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

component.html：

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

我也搜索了一些关键词，但得到了不相关的结果

-------------------编辑-------------------------- 很抱歉提出了一个模棱两可的问题。
我知道

select

是如何工作的。但我希望一个简单的只读输入文本框以编程方式附加到它，其值为

{Id:1，Text:“此处有一些文本…”

，并在其中显示相应的文本，但在内部将Id保存到它的

formControl

。 例如，考虑一个<代码>数据包< /COD>，它有一个“1980—02-03”的文本表示，但是当你记录表单值：<代码>控制台。log（这个表单。值）< /C> >它显示了表示文本的<代码>数据< /代码>对象。

---

收获！我不想创建日期选择器或选择器我想知道如何设置自定义对象的文本表示形式，因此我更改了问题主题。

如果您的有效输入集是有限的，并且可以表示为

{Id:number，text:string}

数组，则必须使用select。输入用于自由文本，可以使用某些函数进行验证，但表单值始终是输入中输入的文本。如果您想要一些魔力，您可以随时创建自己的自定义控件

我想这就是你想要的：

组成部分：

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>

{{option.text}
提交

因此，您将

id

属性绑定到表单控件值，同时显示

text

属性。

---

如果能知道原因，那就太好了-1？当然，为了简单起见，我省略了一些部分，但我知道角度、提问和……的原理。你能在你的

模板

文件中显示你的

选择

或

下拉列表

代码吗？