在 Angular 6 中重置 Reactive Form 时不会禁用输入
Input does not disable on resetting a Reactive Form in Angular 6
我已经创建了一个 StackBlitz example 我的问题。
我有一个FormService
构建表单,通过initForm()
方法中的组件获取:-
public getForm() {
return this.fb.group({
cb1: this.fb.control(false),
cb2: this.fb.control(false),
inputBox: this.fb.control({value: '', disabled: true}, Validators.required)
});
}
如果选中 none 个复选框,我需要禁用输入文本框。这让我做了这样的事情:-
if(!this.cb1.value && !this.cb2.value) {
this.isCheckboxSelectionInvalid = true;
this.inputBox.disable();
} else {
this.isCheckboxSelectionInvalid = false;
this.inputBox.enable();
}
这适用于所有默认方案 - 但存在问题。当我调用 resetForm()
(前提是通过选中其中一个复选框启用输入)时,它基本上调用了与 initForm()
相同的方法,输入保持启用状态。即使在我调用验证复选框选择并禁用 initForm()
方法中的输入的方法之后也是如此。
为了理智,我记录了输入的值 disabled
属性 - 它记录了 true
.
为什么输入没有被禁用?任何帮助将不胜感激,这是工作中的一个问题。
不创建另一个表单实例,而是实际重置现有表单怎么样?
resetForm() {
this.form.reset({
cb1: false,
cb2: false
});
this.validateCheckboxSelectionAndChangeInputState();
}
https://stackblitz.com/edit/angular-6-reactive-form-disable-pefhmc
您遇到的问题与 angular 错误有关,您可以找到更多信息 here。
有一些对我有用的解决方法:
- 在 setTimeout 中调用禁用函数。
validateCheckboxSelectionAndChangeInputState() {
if (!this.cb1.value && !this.cb2.value) {
this.isCheckboxSelectionInvalid = true;
setTimeout(() => {
this.inputBox.disable();
}, 0);
} else {
this.isCheckboxSelectionInvalid = false;
this.inputBox.enable();
}
}
- 直接设置禁用属性:
<input type="text" [attr.disabled]="form.controls['inputBox'].disabled" formControlName="inputBox" />
- 在调用 enable/disable 函数之前调用 detectChanges。
validateCheckboxSelectionAndChangeInputState() {
this.ref.detectChanges();
if (!this.cb1.value && !this.cb2.value) {
this.isCheckboxSelectionInvalid = true;
this.inputBox.disable();
} else {
this.isCheckboxSelectionInvalid = false;
this.inputBox.enable();
}
}
与问题无关的建议:
有了启用或禁用控件的想法,可以订阅表单valueChanges:
initForm() {
this.form = this.formService.getForm();
this.cb1 = this.form.get("cb1");
this.cb2 = this.form.get("cb2");
this.inputBox = this.form.get("inputBox");
this.form.valueChanges.subscribe(
this.validateCheckboxSelectionAndChangeInputState.bind(this)
);
}
validateCheckboxSelectionAndChangeInputState(controls) {
if (this.inputBox.disabled && controls.cb1 && controls.cb2) {
this.inputBox.enable();
}
if(this.inputBox.enabled && !controls.cb1 && !controls.cb) {
setTimeout(() => {
this.inputBox.disable();
}, 0);
}
}
toggleCb1() {
this.cb1.setValue(!this.cb1.value);
}
toggleCb2() {
this.cb2.setValue(!this.cb2.value);
}
resetForm() {
this.initForm();
}
您还可以使用 form.valid [禁用] 按钮,并使用 Validators.requiredTrue:
html
<button [disabled]="!form.valid" (click)="submitForm()">
Submit
</button>
ts
public getForm() {
return this.fb.group({
cb1: this.fb.control(false, [Validators.requiredTrue]),
cb2: this.fb.control(false, [Validators.requiredTrue]),
inputBox: this.fb.control(
{ value: "", disabled: true },
[Validators.required]
)
});
}
见https://stackblitz.com/edit/angular-6-reactive-form-disable-jn4cf8?file=src%2Fapp%2Fapp.component.ts
我已经创建了一个 StackBlitz example 我的问题。
我有一个FormService
构建表单,通过initForm()
方法中的组件获取:-
public getForm() {
return this.fb.group({
cb1: this.fb.control(false),
cb2: this.fb.control(false),
inputBox: this.fb.control({value: '', disabled: true}, Validators.required)
});
}
如果选中 none 个复选框,我需要禁用输入文本框。这让我做了这样的事情:-
if(!this.cb1.value && !this.cb2.value) {
this.isCheckboxSelectionInvalid = true;
this.inputBox.disable();
} else {
this.isCheckboxSelectionInvalid = false;
this.inputBox.enable();
}
这适用于所有默认方案 - 但存在问题。当我调用 resetForm()
(前提是通过选中其中一个复选框启用输入)时,它基本上调用了与 initForm()
相同的方法,输入保持启用状态。即使在我调用验证复选框选择并禁用 initForm()
方法中的输入的方法之后也是如此。
为了理智,我记录了输入的值 disabled
属性 - 它记录了 true
.
为什么输入没有被禁用?任何帮助将不胜感激,这是工作中的一个问题。
不创建另一个表单实例,而是实际重置现有表单怎么样?
resetForm() {
this.form.reset({
cb1: false,
cb2: false
});
this.validateCheckboxSelectionAndChangeInputState();
}
https://stackblitz.com/edit/angular-6-reactive-form-disable-pefhmc
您遇到的问题与 angular 错误有关,您可以找到更多信息 here。
有一些对我有用的解决方法:
- 在 setTimeout 中调用禁用函数。
validateCheckboxSelectionAndChangeInputState() {
if (!this.cb1.value && !this.cb2.value) {
this.isCheckboxSelectionInvalid = true;
setTimeout(() => {
this.inputBox.disable();
}, 0);
} else {
this.isCheckboxSelectionInvalid = false;
this.inputBox.enable();
}
}
- 直接设置禁用属性:
<input type="text" [attr.disabled]="form.controls['inputBox'].disabled" formControlName="inputBox" />
- 在调用 enable/disable 函数之前调用 detectChanges。
validateCheckboxSelectionAndChangeInputState() {
this.ref.detectChanges();
if (!this.cb1.value && !this.cb2.value) {
this.isCheckboxSelectionInvalid = true;
this.inputBox.disable();
} else {
this.isCheckboxSelectionInvalid = false;
this.inputBox.enable();
}
}
与问题无关的建议:
有了启用或禁用控件的想法,可以订阅表单valueChanges:
initForm() {
this.form = this.formService.getForm();
this.cb1 = this.form.get("cb1");
this.cb2 = this.form.get("cb2");
this.inputBox = this.form.get("inputBox");
this.form.valueChanges.subscribe(
this.validateCheckboxSelectionAndChangeInputState.bind(this)
);
}
validateCheckboxSelectionAndChangeInputState(controls) {
if (this.inputBox.disabled && controls.cb1 && controls.cb2) {
this.inputBox.enable();
}
if(this.inputBox.enabled && !controls.cb1 && !controls.cb) {
setTimeout(() => {
this.inputBox.disable();
}, 0);
}
}
toggleCb1() {
this.cb1.setValue(!this.cb1.value);
}
toggleCb2() {
this.cb2.setValue(!this.cb2.value);
}
resetForm() {
this.initForm();
}
您还可以使用 form.valid [禁用] 按钮,并使用 Validators.requiredTrue:
html
<button [disabled]="!form.valid" (click)="submitForm()">
Submit
</button>
ts
public getForm() {
return this.fb.group({
cb1: this.fb.control(false, [Validators.requiredTrue]),
cb2: this.fb.control(false, [Validators.requiredTrue]),
inputBox: this.fb.control(
{ value: "", disabled: true },
[Validators.required]
)
});
}
见https://stackblitz.com/edit/angular-6-reactive-form-disable-jn4cf8?file=src%2Fapp%2Fapp.component.ts