Angular 2：禁用输入字段而不从表单组中删除？

Posted 2023-03-05

【中文标题】Angular 2：禁用输入字段而不从表单组中删除？

【英文标题】：Angular 2: Disable input field without removing from formgroup?

【发布时间】：2017-04-22 06:25:56

【问题描述】：

我正在开发一个 Angular 2 项目，我正在使用表单和验证，并遇到了以下问题。我有一个包含 3 个字段的页面：

身高 重量 体重指数

我希望所有 3 个字段都在我的表单中，因此我做了以下操作：

<input name="height" type="text" class="form-control" formControlName="height">
<input name="weight" type="text" class="form-control" formControlName="weight">
<input name="bmi" type="text" class="form-control" formControlName="bmi">

到目前为止，这工作正常。虽然，我希望自动计算 BMI。我有一个函数可以检测两个字段（身高和体重）的变化并计算 BMI 并将其输出到 BMI 输入字段中。这也可以按预期工作。

但是，我想禁用 BMI 输入字段以防止用户输入任何内容。所以我有以下 3 个标准：

此处的输入字段旨在用作用户的只读字段。 我还希望 BMI 成为表单组的一部分，当所有 3 个字段都有效时，我将其发送到我的数据库。 （可选，但非常需要）我希望 BMI 字段是一个输入字段，其中包含我已经实现的身高和体重的结果，而不是纯文本。

我尝试在 BMI 输入字段上放置 [disabled]=true 标记，但该标记不起作用，并警告我应该在表单组中添加禁用标记。当我这样做或使用此命令时：this.myForm.controls['BMI'].disable(); 它确实会按预期禁用它，但也会将其从表单组中删除。这意味着当我提交表单组时，只发送身高和体重的值，而忽略了 bmi。

我该怎么做？ 非常感谢任何帮助！

【问题讨论】：

你试过[readonly]="true"吗？

【参考方案1】：

您是否尝试在输入上放置只读属性？

<input name="bmi" type="text" class="form-control" formControlName="bmi" readonly>

【讨论】：

@Pankaj Parkar，刚刚看到您对问题的评论。这应该也可以。

我相信 readonly 是 html 5，所以除非其他人对旧版友好的解决方案有任何想法，否则除非出现旧版浏览器问题。

【参考方案2】：

您是否在使用某种 UI 框架？ http://semantic-ui.com/collections/form.html#read-only-field

【参考方案3】：

formGroup.getRawValue() 甚至会返回禁用的字段，

Source