FormConen上的ValueChanges在Form.enable时触发,即使使用emitEvent:false也是如此

Question

使用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

Answer 1

既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