angular - 如何使用控制台 devtools 更新 angular 4+ 表单值？

Question

我正在尝试使用控制台 (devtools) 填写 Angular 4+ 表单。

这就是我现在正在做的:

function fillForm(){
    let el = document.querySelector('input[ng-reflect-name="my_input"]');
    let elProbe = ng.probe(el);
    elProbe._debugContext.component.value = 'new-value';
}

我尝试使用的一些引用资料(如果它对任何人有帮助的话):

• https://juristr.com/blog/2016/02/debugging-angular2-console/
• Trigger Angular change detection from console

Answer 1

有两种选择。第一个是使用绑定(bind)到表单的组件属性，它需要手动触发更改检测。第二个是使用与输入关联的表单控件，它不需要手动更改检测。

两者都不是更好。

对于第一个选项，请参阅@yurzui 的回答。这是第二个选项的答案 - 直接更新表单控件而不需要更改检测:

function fillForm(){
    let el = document.querySelector('input[ng-reflect-name="my_input"]');
    let elProbe = ng.probe(el);

    const NgControlClassReference = elProbe.providerTokens.find((p)=>{ 
        return p.name === 'NgControl';
    });

    let directive = elProbe.injector.get(NgControlClassReference);
    let control = directive.control;

    control.setValue('some');
}

在这种情况下，您不需要更改检测，因为当您直接在控件上调用 setValue 时，它会通知 valueAccessor 有关更改:

FormControl.prototype.setValue = function (value, options) {
  ...
  this._onChange.forEach(function (changeFn) { 
      return changeFn(_this._value, options.emitViewToModelChange !== false); });

其中 changeFn 是在 setUpContorl 函数中添加的订阅者:

  control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
    // control -> view
    dir.valueAccessor !.writeValue(newValue);

它直接在访问器上调用 writeValue，然后将值写入输入:

export class DefaultValueAccessor implements ControlValueAccessor {
  ...

  writeValue(value: any): void {
    const normalizedValue = value == null ? '' : value;
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue);
  }

您可能还会发现这篇文章很有用

Everything you need to know about debugging Angular applications