如何使用控制台开发工具更新 Angular 4+ 表单值？

Question

我正在尝试使用控制台（开发工具）填写 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/
• 从控制台触发角度变化检测

Answer 1

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

两者都不是更好。

对于第一个选项，请参阅@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);
  }

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

关于调试 Angular 应用程序您需要了解的一切