javascript - Angular 2 : Disable input field without removing from formgroup?

Question

我正在做一个 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。

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

Answer 1

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

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