How to update a angular 4+ form values using console devtools?

Question

I'm trying to fill a Angular 4+ form using console (devtools).

This is what I'm doing now:

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

Some references I'm trying to use (if it helps anyone):

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

Answer 1

There are two options. The first one is to work with component property bound to a form and it requires manual change detection triggering. The second one is to work with the form control associated with the input and it doesn't require manual change detection.

Neither is better.

For the first option see @yurzui's answer. Here is the answer for the second option - update the form control directly without the need for change detection:

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');
}

In this case you don't need change detection because when you call setValue on the control directly it notifies valueAccessor about the change:

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

where changeFn is a subscriber added in the setUpContorl function:

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

which calls writeValue on the accessor directly and it in turn writes the value into input:

export class DefaultValueAccessor implements ControlValueAccessor {
  ...

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

You also might find this article useful

Everything you need to know about debugging Angular applications

Answer 2

Simple way of doing this could be running change detection cycle using core token for ApplicationRef

let el = document.querySelector('input[ng-reflect-name="my_input"]');
let elProbe = ng.probe(el);   
elProbe._debugContext.component.value = 'new-value';
elProbe.injector.get(ng.coreTokens.ApplicationRef).tick()

You can also take a look at integration tests

https://github.com/angular/angular/blob/master/packages/forms/test/template_integration_spec.ts#L28-L30

I think this way we check how our component works with NgModel and don't call direct API on inner NgModel directive.

Without calling change detection we can also the following code to simulate user action

let valueAccessor = elProbe.injector.get(elProbe.providerTokens
                       .find(x =>x.name === 'DefaultValueAccessor'));

el.value = 'some';
valueAccessor.onChange('some');

But it looks very strange

Answer 3

Copy/paste spin-off from the accepted answer to fill multiple fields at once:

[
  { selector: "#initials", val: "JJA" },
  { selector: "#lastName", val: "Steenbruggehoek" },
  { selector: "#email", val: "[email protected]" },
].forEach(item => {
    const el = document.querySelector(item.selector);
    if (!el) { console.warn(item.selector, 'not found'); return; }
    const probe = ng.probe(el);
    const ref = probe.providerTokens.find(p => p.name === 'NgControl');
    const directive = probe.injector.get(ref);
    directive.control.setValue(item.val);
});

As the other answer, only works for debug builds.