Angular 2:禁用输入字段而不从 formgroup 中删除?

我正在开发一个 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 输入字段以防止用户输入任何内容。所以我有以下三个标准:

  • 这里的输入字段意味着用作用户的只读字段。

  • 我还希望 BMI 成为 formgroup 的一部分,当所有 3 个字段都有效时,我将发送到我的数据库。

  • (可选,但非常需要)我希望 BMI 字段是一个输入字段,其结果来自高度和重量,因为我实现了它,而不是纯文本。

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

我怎样才能做到这一点?任何帮助是极大的赞赏!

回答(3)

5 years ago

您是否尝试在输入上放置 readonly 属性?

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

5 years ago

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

3 years ago

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

资源