Angular2 RC6禁用输入

Question

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

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

其目的是使用户在编辑模式下不可编辑此字段；因此，禁用了属性。

升级到Angular2 RC6之后，我将在控制台中获得以下消息：

看起来，您使用的是带有反应性表单指令的禁用属性。如果在组件类中设置此控件时，将禁用属性设置为true，则禁用属性实际上将在DOM中为您设置。我们建议使用这种方法来避免“检查后更改”错误。 示例： 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

正确的答案为角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();

但是，浏览器不应该允许禁用的提交元素。这个流行的问题有关于那个禁用输入的值将不会被赋值？的更多信息。

人们已经想出了各种各样的方法和方法来避免这种情况，比如隐藏的输入字段、readonly属性，或者在提交之前启用字段。

Answer 2

可以将“禁用”实例FormControl设置为“true”，而不是模板中的禁用属性。

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

或

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

Answer 3

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