作者:mobiledu2502882721 | 来源:互联网 | 2023-02-06 04:22
如何解决《FormConen上的ValueChanges在Form.enable时触发,即使使用emitEvent:false也是如此》经验,为你挑选了1个好方法。
使用Angular(4.x)我使用ReactiveForms并且我在FormControl("input")上订阅了valueChanges,如下所示:
export class App {
version:string;
formCOntrol= new FormControl('default', []);
form = this.fb.group({
input: this.formControl,
input2: ('',[])
});
constructor(private fb: FormBuilder) {
this.version = `Angular v${VERSION.full}`
}
ngOnInit() {
this.formControl.valueChanges.subscribe(value => doSomething(value));
}
所以现在我可以对FormControl的值进行更改,但我当然从某处开始填写表单的值,所以我习惯form.patchValue(data)
这样做.
由于这不是用户更改,我不想对它做出反应,因此添加标志emitEvent: false
,如:this.form.patchValue(data, {emitEvent: false})
.
哪个按预期工作.
现在我有一些逻辑,当表单加载时,我将整个表单设置为禁用this.form.disable({ emitEvent: false })
,并在完成加载后将整个表单设置为再次启用:this.form.disable({ emitEvent: false })
但我也有逻辑,根据不同的标志将FormControl设置为启用/禁用: this.formControl.enable( {emitEvent: false});
我现在看到的问题是,当Form
改变状态时,它会触发FormControl.valueChanges
,即使我提供了emitEvent: false
标志.
这是预期的行为还是错误?我预计在提供旗帜时根本不会触发任何事件?
我已经做了一个可以在这里测试的插件:https://plnkr.co/edit/RgyDItYtEfzlLVB6P5f3?p = preview
1> Andriy..:
既disable()
和enable()
功能(代码源):
/**
* Disables the control. This means the control will be exempt from validation checks and
* excluded from the aggregate value of any parent. Its status is `DISABLED`.
*
* If the control has children, all children will be disabled to maintain the model.
* @param {?=} opts
* @return {?}
*/
AbstractControl.prototype.disable = function (opts) {
if (opts === void 0) { opts = {}; }
this._status = DISABLED;
this._errors = null;
this._forEachChild(function (control) { control.disable({ onlySelf: true }); });
this._updateValue();
if (opts.emitEvent !== false) {
this._valueChanges.emit(this._value);
this._statusChanges.emit(this._status);
}
this._updateAncestors(!!opts.onlySelf);
this._onDisabledChange.forEach(function (changeFn) { return changeFn(true); });
};
/**
* Enables the control. This means the control will be included in validation checks and
* the aggregate value of its parent. Its status is re-calculated based on its value and
* its validators.
*
* If the control has children, all children will be enabled.
* @param {?=} opts
* @return {?}
*/
AbstractControl.prototype.enable = function (opts) {
if (opts === void 0) { opts = {}; }
this._status = VALID;
this._forEachChild(function (control) { control.enable({ onlySelf: true }); });
this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
this._updateAncestors(!!opts.onlySelf);
this._onDisabledChange.forEach(function (changeFn) { return changeFn(false); });
};
打电话给:
this._updateAncestors(!!opts.onlySelf);
它调用其父项的updateValueAndValidity()
函数而没有emitEvent
标志,然后调用
this._valueChanges.emit(this._value);
这会触发valueChanges
表单的发射器并在控制台中看到:
Form.valueChanges: Object { input2: null }
这是由表单而不是default
输入字段控制器触发的.为了阻止祖先更新,我们只需要提供额外的标志 - onlySelf: true
它告诉只更新自己而不是祖先.因此,在您不想更新祖先的每次调用disable()
或enable()
函数中添加此标志:
disable(){
this.form.disable({
onlySelf: true,
emitEvent: false
});
}
disableWEvent(){
this.form.disable({
onlySelf: true
});
}
enable(){
this.form.enable({
onlySelf: true,
emitEvent: false
});
}
enableWEvent(){
this.form.enable({
onlySelf: true
});
}
disableCtrl(){
this.formControl.disable({
onlySelf: true,
emitEvent: false
});
}
disableCtrlWEvent(){
this.formControl.disable({
onlySelf: true
});
}
enableCtrl(){
this.formControl.enable({
onlySelf: true,
emitEvent: false
});
}
enableCtrlWEvent(){
this.formControl.enable({
onlySelf: true
});
}
这将解决leaf formControls(没有子节点的控件)的问题,但这一行
this._forEachChild(function (control) { control.disable({ onlySelf: true }); });
将调用disable
(或enable
)函数而不传递emitEvent: false
.它看起来像有角度的bug,所以,作为解决方法,我们可以覆盖这两个函数.首先进口AbstractControl
:
import {ReactiveFormsModule, FormBuilder, FormControl, Validators, AbstractControl} from '@angular/forms'
而不是覆盖两个功能:
// OVERRIDE disable and enable methods
// https://github.com/angular/angular/issues/12366
// https://github.com/angular/angular/blob/c59c390cdcd825cca67a422bc8738f7cd9ad42c5/packages/forms/src/model.ts#L318
AbstractControl.prototype.disable = function (opts) {
if (opts === void 0) { opts = {}; }
this._status = 'DISABLED';
this._errors = null;
this._forEachChild(function (control) {
control.disable(Object.assign(opts, {onlySelf: true}));
});
this._updateValue();
if (opts.emitEvent !== false) {
this._valueChanges.emit(this._value);
this._statusChanges.emit(this._status);
}
this._updateAncestors(!!opts.onlySelf);
this._onDisabledChange.forEach(function (changeFn) { return changeFn(true); });
};
AbstractControl.prototype.enable = function (opts) {
if (opts === void 0) { opts = {}; }
this._status = 'VALID';
this._forEachChild(function (control) {
control.enable(Object.assign(opts, {onlySelf: true}));
});
this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
this._updateAncestors(!!opts.onlySelf);
this._onDisabledChange.forEach(function (changeFn) { return changeFn(false); });
};
更新的plunker:https://plnkr.co/edit/IIaByz4GlBREj2X9EKvx ? p = preview