我已经试着从这里效仿其他答案,但我没有成功!
我创建了一个响应式表单(即,动态),我想在任何给定的时间禁用一些字段。我的表单代码:
this.form = this._fb.group({
name: ['', Validators.required],
options: this._fb.array([])
});
const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
value: ['']
}));
我的html:
<div class='row' formArrayName="options">
<div *ngFor="let opt of form.controls.options.controls; let i=index">
<div [formGroupName]="i">
<select formArrayName="value">
<option></option>
<option>{{ opt.controls.value }}</option>
</select>
</div>
</div>
</div>
为了方便起见,我简化了代码。我想禁用类型选择字段。我试着这样做:
form = new FormGroup({
first: new FormControl({value: '', disabled: true}, Validators.required),
});
不工作!有人有什么建议吗?
在FormControl中将disabled属性设置为true肯定会禁用输入字段。
this.form=this.fb.group({
FirstName:[{value:'first name', disabled:true}],
LastValue:['last name,[Validators.required]]
})
上面的例子将禁用FirstName输入字段。
但是当您试图通过这样的表单访问禁用的字段值时,真正的问题就出现了
console.log (this.form.value.FirstName);它显示为undefined而不是打印field的实际值。因此,要访问禁用字段的值,必须使用响应式表单提供的getRawValue()方法。即console.log (this.form.getRawValue () .FirstName);将打印表单字段的实际值,而不是未定义。
在FormControl中将disabled属性设置为true肯定会禁用输入字段。
this.form=this.fb.group({
FirstName:[{value:'first name', disabled:true}],
LastValue:['last name,[Validators.required]]
})
上面的例子将禁用FirstName输入字段。
但是当您试图通过这样的表单访问禁用的字段值时,真正的问题就出现了
console.log (this.form.value.FirstName);它显示为undefined而不是打印field的实际值。因此,要访问禁用字段的值,必须使用响应式表单提供的getRawValue()方法。即console.log (this.form.getRawValue () .FirstName);将打印表单字段的实际值,而不是未定义。
在响应式表单的DOM中使用disable是不好的做法。
当初始化from时,你可以在FormControl中设置这个选项
username: new FormControl(
{
value: this.modelUser.Email,
disabled: true
},
[
Validators.required,
Validators.minLength(3),
Validators.maxLength(99)
]
);
不需要属性值
或者你可以使用get('control_name')来获取表单控件并设置为禁用
this.userForm.get('username').disable();