如何禁用 FormGroup 中的所有 FormControl
How to disable all FormControls inside a FormGroup
我有这个反应式 Angular 表单结构:
myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void {
this.createFormControls();
this.createForm();
}
createFormControls() {
this.FIRST_NAME = new FormControl('', [Validators.required]);
this.LAST_NAME = new FormControl('', [Validators.required]);
}
createForm(): void {
this.myForm = this.fb.group({
Personal: this.fb.group({
FIRST_NAME: this.FIRST_NAME,
LAST_NAME: this.LAST_NAME,
})
})
}
如果我这样做:
this.FIRST_NAME.disable();
它禁用 FormControl。
如何禁用 Personal
FormGroup
中的所有 FormControl
您可以禁用整个表单
this.Personal.disable();
或者您可以枚举所有表单控件并disable/enable一一枚举它们
for (var control in this.Personal.controls) {
this.Personal.controls[control].disable();
}
您可以像那样禁用控件。所以你的表单生成器应该是这样的:
createForm(): void {
this.myForm = this.fb.group({
Personal: this.fb.group({
FIRST_NAME: {
value: this.FIRST_NAME,
disabled: true
},
LAST_NAME: this.LAST_NAME,
})
})
}
然后如果你想disable/enable。使用以下方法:
this.myForm.get('Personal.FIRST_NAME').disable();
this.myForm.get('Personal.FIRST_NAME').enable();
如果你想禁用组,你需要告诉this.Personal
是什么,现在你只是将它声明为一个FormGroup,没有别的。
因此您可以在构建表单后完成:
this.Personal = this.myForm.get('Personal')
然后你可以禁用它:
this.Personal.disable();
一个简单的解决方案:
<fieldset [disabled]="!frmCheckout.get('id').value">
... All controls inside will apply disabled rules ...
</fieldset>
给定以下形式:
this.myForm = this.fb.group({
personal: this.fb.group({
firstName: null,
lastName: null
})
});
A) 如果您想以编程方式 enable/disable personal
表单组,就像已经接受的答案所说,您可以使用 group.disable()
/ group.enable()
。但是,我想提一下选项参数的重要性:
this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });
选项参数 { emitEvent: false }
当然是可选的。有时您可能希望表单发出事件,但有时您不需要。
如果您在 myForm.valueChanges.subscribe()
中的 disabled/enabled 之间进行切换,则需要它,因为有时您需要根据其他控件的 value/state enable/disable 不同的 controls/groups以完全相同的形式。如果没有 { emitEvent: false }
,那将导致死循环。
B) 如果你想在初始化时禁用它,那么你需要初始化它的所有控件以禁用。以下表单组将从一开始就被禁用:
this.myForm = this.fb.group({
personal: this.fb.group({
firstName: [ { value: null, disabled: true }, Validators.required ],
lastName: [ { value: null, disabled: true }, Validators.required ],
email: [ { value: null, disabled: true }, [ Validators.required, Validators.email ] ],
birthDate: { value: null, disabled: true }
})
});
console.log(this.myForm.get('personal').disabled); // This will output "true"
我还添加了验证器作为示例,以防万一有人想知道:当控件被禁用时,我们不需要担心验证器,验证将被忽略。
您可以像这样禁用所有 formControls :
Object.keys(this.form.controls).forEach(ctrl => {
this.editForm.controls[ctrl].disable();
});
如果您想 enable/disable FormGroup 来编辑数据,您可以使用这个简单的 One-Liner:
this.Personal.disabled ? this.Personal.enable() : this.Personal.disable();
我有这个反应式 Angular 表单结构:
myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void {
this.createFormControls();
this.createForm();
}
createFormControls() {
this.FIRST_NAME = new FormControl('', [Validators.required]);
this.LAST_NAME = new FormControl('', [Validators.required]);
}
createForm(): void {
this.myForm = this.fb.group({
Personal: this.fb.group({
FIRST_NAME: this.FIRST_NAME,
LAST_NAME: this.LAST_NAME,
})
})
}
如果我这样做:
this.FIRST_NAME.disable();
它禁用 FormControl。
如何禁用 Personal
FormGroup
您可以禁用整个表单
this.Personal.disable();
或者您可以枚举所有表单控件并disable/enable一一枚举它们
for (var control in this.Personal.controls) {
this.Personal.controls[control].disable();
}
您可以像那样禁用控件。所以你的表单生成器应该是这样的:
createForm(): void {
this.myForm = this.fb.group({
Personal: this.fb.group({
FIRST_NAME: {
value: this.FIRST_NAME,
disabled: true
},
LAST_NAME: this.LAST_NAME,
})
})
}
然后如果你想disable/enable。使用以下方法:
this.myForm.get('Personal.FIRST_NAME').disable();
this.myForm.get('Personal.FIRST_NAME').enable();
如果你想禁用组,你需要告诉this.Personal
是什么,现在你只是将它声明为一个FormGroup,没有别的。
因此您可以在构建表单后完成:
this.Personal = this.myForm.get('Personal')
然后你可以禁用它:
this.Personal.disable();
一个简单的解决方案:
<fieldset [disabled]="!frmCheckout.get('id').value">
... All controls inside will apply disabled rules ...
</fieldset>
给定以下形式:
this.myForm = this.fb.group({
personal: this.fb.group({
firstName: null,
lastName: null
})
});
A) 如果您想以编程方式 enable/disable personal
表单组,就像已经接受的答案所说,您可以使用 group.disable()
/ group.enable()
。但是,我想提一下选项参数的重要性:
this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });
选项参数 { emitEvent: false }
当然是可选的。有时您可能希望表单发出事件,但有时您不需要。
如果您在 myForm.valueChanges.subscribe()
中的 disabled/enabled 之间进行切换,则需要它,因为有时您需要根据其他控件的 value/state enable/disable 不同的 controls/groups以完全相同的形式。如果没有 { emitEvent: false }
,那将导致死循环。
B) 如果你想在初始化时禁用它,那么你需要初始化它的所有控件以禁用。以下表单组将从一开始就被禁用:
this.myForm = this.fb.group({
personal: this.fb.group({
firstName: [ { value: null, disabled: true }, Validators.required ],
lastName: [ { value: null, disabled: true }, Validators.required ],
email: [ { value: null, disabled: true }, [ Validators.required, Validators.email ] ],
birthDate: { value: null, disabled: true }
})
});
console.log(this.myForm.get('personal').disabled); // This will output "true"
我还添加了验证器作为示例,以防万一有人想知道:当控件被禁用时,我们不需要担心验证器,验证将被忽略。
您可以像这样禁用所有 formControls :
Object.keys(this.form.controls).forEach(ctrl => {
this.editForm.controls[ctrl].disable();
});
如果您想 enable/disable FormGroup 来编辑数据,您可以使用这个简单的 One-Liner:
this.Personal.disabled ? this.Personal.enable() : this.Personal.disable();