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

Question

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

这是代码的原型：

组件.ts：

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

组件.html：

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

我还搜索了一些关键字，但获得了无关紧要的结果。

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

标签： angularangular-reactive-forms

Answer 1

如果您的有效输入集是有限的并且可以表示为一个数组，{Id: number, Text: string}那么您必须使用选择。输入是自由文本，可以使用某些函数进行验证，但表单值将始终是输入中输入的文本。如果你想要一些魔法，你总是可以创建自己的自定义控件。