Angular2 RC6禁用输入

Question

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

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

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

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

看起来您正在使用带有反应式表单指令的disabled属性.如果在组件类中设置此控件时将disabled设置为true,则实际将在DOM中为您设置disabled属性.我们建议使用此方法来避免"检查后更改"错误.

例:

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();

但是,浏览器不应允许提交已禁用的元素.这个受欢迎的问题有更多的信息,关于残疾人投入的价值不会被提交？

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

Answer 2

您可以将“disabled”实例 FormControl 设置为“true”，而不是在模板中设置“disabled”属性。

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

或者

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