Angular 15：如何让输入框显示指定文本并将对应值传入Form Builder

问题原因 #

Angular响应式表单中，formControlName绑定的控件值由FormGroup的初始化值控制，直接在<input>上写value属性会被表单控件的初始值覆盖。同时placeholder仅在输入框为空时显示，所以初始值为空的输入框会显示placeholder内容，且表单控件不会获取到value属性的值。

解决方案 #

要实现输入框显示“Prosumer”，同时rolaId字段值为2，需要将显示文本与表单提交值分离，以下是两种可行方式：

方式一：隐藏控件存储表单值，禁用输入框显示文本

适合不需要用户修改该字段的场景：

<!-- 禁用的输入框显示“Prosumer”，不绑定表单控件 -->
<input class="form-control" type="text" value="Prosumer" disabled>
<!-- 隐藏控件绑定rolaId，存储实际提交值 -->
<input type="hidden" formControlName="rolaId">

// 组件类中初始化表单时，设置rolaId的初始值为2
this.signUpForm = this.forma.group({
  name: ['', Validators.required],
  rolaId: ['2', Validators.required]
});

方式二：只读输入框显示文本，绑定表单控件设置提交值

如果希望输入框看起来可交互但无法修改，使用readonly属性：

<!-- 只读输入框显示“Prosumer”，绑定表单控件rolaId -->
<input class="form-control" type="text" value="Prosumer" readonly formControlName="rolaId">

// 初始化表单时设置rolaId的初始值为2，确保表单提交值正确
this.signUpForm = this.forma.group({
  name: ['', Validators.required],
  rolaId: ['2', Validators.required]
});

关键说明 #

• 必须在FormGroup初始化时给rolaId设置初始值'2'，才能保证表单控件获取到正确的提交值。
• 禁用或只读的输入框可防止用户修改显示文本，隐藏控件或绑定的表单控件负责传递实际提交值。

内容的提问来源于stack exchange，提问作者Marko Kostic