Question

以前在我的Angular2 RC5应用程序中，我有一个输入元素，如下所示：

<input type="text" formControlName="blah" disabled/>

目的是让用户在编辑模式下不可编辑该字段;因此禁用属性。

升级到Angular2 RC6后，我在控制台中收到以下消息：

您似乎正在使用带有响应式表单指令的disabled属性。如果在组件类中设置此控件时将disabled设置为true，则实际将在DOM中为您设置disabled属性。我们建议使用这种方法，以避免在检查后更改＆＃39;错误。

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

但是，如果我遵循此建议，删除我的禁用属性并将我的FormControl替换为禁用设置为true，则该字段不会在提交时发布（即它不会出现在form.value中）。

我是否错误地编码了这种情况？是否有一种方法可以将禁用的FormControl包含在表单值中？

作为旁注，我实际上使用FormBuilder而不是设置每个FormControl，如果这会产生影响。

Answer 1

Angular 2.4.1中的正确答案以及像你一样使用FormBuilder

form: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit() {
    this.form = this.fb.group({
      blah: [{ value: '', disabled: true }]
});

你可以通过调用

打开它

this.form.get("blah").enable();

或通过致电

关闭

this.form.get("blah").disable();

但是，浏览器不应允许提交已禁用的元素。这个热门问题有关于values of disabled inputs will not be submited?

的更多信息

为了避免这种情况，人们已经提出了各种黑客和解决方法，例如隐藏的输入字段，readonly属性，或者在提交之前启用字段。

Answer 2

您可以设置＆＃39;而不是模板中的已禁用属性。残疾人士＃39;实例FormControl为＆＃39; true＆＃39;。

blah: FormControl = new FormControl({value: 'text', disabled: true});

或

blah: FormControl = new FormControl('text');
blah.disabled = true;

Answer 3

您可以尝试在输入中使用readonly属性：<input type="text" [readonly]="true" />

Answer 4

您需要使用getRawValue()

请参阅：Disabled input validation in dynamic form

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#getRawValue-anchor

如果您想要包括所有值而不管禁用状态如何，请使用此方法。否则，value属性是获取组值的最佳方式。

Answer 5

我想使用此代码。如果你想禁用它 this.userForm.controls['UserID'].disable({ onlySelf: true }); 如果你想启用
this.userForm.controls['UserID'].enable({ onlySelf: false });

Answer 6

这是诀窍：this.form.getRawValue();，无需更改您的模型。

在您的组件中，通过usein getRawValue获取值，它也会返回已禁用控件的值。

这是我要测试的保存方法：

save() {       
    let data = this.form.getRawValue();
    if (!this.form.valid)
        return;
    ...................
    ...................
}

For more information see the last two paragraph on the page

Answer 7

你可以这样做，

在模板中：

<[disabled]="state"/>

在组件中：

 state:any = true;

Angular2 RC6禁用输入

7 个答案: