我已经试着从这里效仿其他答案，但我没有成功!
我创建了一个响应式表单(即，动态)，我想在任何给定的时间禁用一些字段。我的表单代码:
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),
});
不工作!有人有什么建议吗?
使响应式形式angular 2+的字段禁用和启用
1.禁用
添加[attr。Disabled]="true"输入。
<input class=“form-control” name=“Firstname” formControlName=“firstname” [attr.disabled]=“true”>
要启用
export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}
启用整个表单
this.formname.enable ();
单独启用特定字段
this.formname.controls.firstname.enable ();
same for disable, replace enable() with disable().
这很好。查询的注释。
角度 14+
field = new FormControl<any>()
readonly formGroup = new FormGroup<any>({
field2: new FormControl<any>(),
});
选项1
ngOnInit() {
# ...
this.field.setDisable();
this.field.setEnable();
this.formGroup.controls.field2.setEnable();
this.formGroup.controls.field2.setDisabled();
# ...
}
选项2
private setFieldEnabled() {
this.field.setEnable()
}
private setFieldDisabled() {
this.field.setDisable()
}
private setField2Enabled() {
this.formGroup.controls.breakdown.setEnable();
}
private setField2Disabled() {
this.formGroup.controls.breakdown.setDisable();
}
setEnableOrDisableFields(truth: boolean): void {
if (truth) {
this.setFieldEnabled()
this.setField2Enabled();
return
}
this.setFieldDisabled()
this.setField2Disabled();
}
注意
如果你正在创建一个使用变量为条件的表单，并试图改变它之后，它将不会工作，即表单将不会改变。
例如
this.isDisabled = true;
this.cardForm = this.fb.group({
number: {value: null, disabled: this.isDisabled},
});
如果你改变变量
this.isDisabled = false;
形式不会改变。你应该使用
this.cardForm.get(数量).disable ();
BTW.
你应该使用patchValue方法来改变值:
this.cardForm.patchValue({
number: '1703'
});
在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);将打印表单字段的实际值，而不是未定义。
