Angular2 RC6禁用输入-Java 学习之路

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

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

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

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

看起来您正在使用带有反应式表单指令的disabled属性 . 如果在组件类中设置此控件时将disabled设置为true，则实际将在DOM中为您设置disabled属性 . 我们建议使用此方法来避免“检查后更改”错误 . 示例：form = new FormGroup（{
第一个：新FormControl（{值：'Nancy'，禁用：true}，Validators.required），
last：new FormControl（'Drew'，Validators.required）
}）;

但是，如果我遵循这个建议，删除我的禁用属性并将我的FormControl替换为禁用设置为true，那么提交时该字段 does not post（即它不会出现在form.value中） .

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

作为旁注，我实际上正在使用FormBuilder而不是设置每个FormControl，如果这有所不同 .

7 回答

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 属性，或者在提交之前启用字段 .
回复于 2024-04-27T18:09:57+08:00
5
您可以将“已禁用”实例FormControl设置为“true”，而不是模板中的disabled属性 .
```
blah: FormControl = new FormControl({value: 'text', disabled: true});
```
要么
```
blah: FormControl = new FormControl('text');
blah.disabled = true;
```
回复于 2024-04-27T18:09:57+08:00
2

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

回复于 2024-04-27T18:09:57+08:00
0

你需要使用 getRawValue()

见：Disabled input validation in dynamic form

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

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

回复于 2024-04-27T18:09:57+08:00
0

如果要启用，如果要禁用 this.userForm.controls['UserID'].disable({ onlySelf: true }); ，我可以使用此代码
this.userForm.controls['UserID'].enable({ onlySelf: false });

回复于 2024-04-27T18:09:57+08:00
4
这是诀窍： 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
回复于 2024-04-27T18:09:57+08:00
-3
你可以这样得到它，

在模板中：
```
<[disabled]="state"/>
```
在组件中：
```
state:any = true;
```
回复于 2024-04-27T18:09:57+08:00

Angular2 RC6禁用输入

7 回答

相关问题