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

Question

我正在使用Angular 2项目，我正在使用窗体和验证，并且遇到以下问题。我有3个字段的页面：

• 高度
• 重量
• BMI

我想所有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个字段都有效时发送给我的数据库的formgroup的一部分。
• （可选，但非常想要）我希望BMI字段是一个输入字段，其结果来自高度和重量，因为我实现了它，而不是纯文本。

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

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

Answer 1

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

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

Answer 2

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