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