Question

我有一个反应形式。在编辑时我想要禁用控件。

以下作品：

   this.myForm.controls['analysis_horizon'].disable();

但是，关键的analysis_horizon不再是我的myForm.value哈希。

如何禁用具有反应形式的字段，但保留表格值散列值？

我试过[禁用] =但我得到以下内容：

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
      when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
      you. We recommend using this approach to avoid 'changed after checked' errors.

      Example: 
      form = new FormGroup({
        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
        last: new FormControl('Drew', Validators.required)
      });

我在编辑时将数据从编辑中加载到表单控件中，但我需要一个字段不允许更改。

Answer 1

您可以使用 getRawValue（）而不是值属性。根据{{3}}：

FormGroup的聚合值，包括任何已禁用的控件。

如果您想要包括所有值而不管禁用状态，请使用   这种方法。否则，值属性是获取的最佳方式   该群体的价值。

this.myForm.getRawValue()

Answer 2

尝试在方法禁用中添加onlySelf: true：

this.myForm.controls['analysis_horizon'].disable({onlySelf: true});

Answer 3

如果您不想使用更改从表单获取值的常规方法的getRawValue，这是另一个选项。我更喜欢readonly的更多理由：https://stackoverflow.com/a/7730719/1678151。

我的解决方案还展示了如何填写表单控件。

component.ts

fillForm(data: any){
 if (data != null && data.firstName){
   this.form.patchValue({
     firstName: data.firstName
   })    
   this.firstNameIsReadOnly = true;
 }

template.html

<input formControlName="firstName" [readonly]='firstNameIsReadOnly'>

styles.scss

input[readonly] {
 color: rgba(0,0,0,.38);
}

Answer 4

我的解决方案是使用[attr.disabled]：

<select formControlName="foo"
  [attr.disabled]="disabled == true ? true : null"> 
</select>

假设您的组件中有禁用的属性。您必须重新调整null而不是false以启用输入。

Answer 5

我在尝试以反应形式实现Angular Material Datepicker时遇到了这个问题-我希望禁用输入，以便只有选择器才能设置日期，但是当您使用{{1}时Angular会大喊大叫}属性，然后在组件表单组代码中将其从表单中删除。

我想出的解决方案是使用CSS来防止与输入的交互：

disabled

.disable-pointer-events {
   pointer-events: none;
}

Answer 6

似乎value属性不会更新=>您不会失去价值。如果您对禁用信息有更多详细信息，例如：

formGroup.get(controlName).disable({onlySelf: true, emitEvent: false});

onlySelf：表示您只想禁用该表格 glowEvent：表示您不希望它更新父表单，并且它的旧值不会消失。

如何禁用表单控件但保持值

6 个答案: