Simple Component code:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-reactive-favorite-color'.template: ` Favorite Color:  `
})
export class ReactFormComponent {
  favoriteColorControl = new FormControl(' ');
}
Copy the code

How is the ng-reflect-form property generated at runtime?

Bootstrap calls _loadComponent:

ChangeDetectorRef: RootViewRef:

ComponentRef points to the AppComponent, and you can see the Component property:

Explicitly calling the tick in loadComponent:

Change detect in the tick function:

Presents Component HTML add a square brackets Directive, the browser is unable to identify, in presents the core, js, the execution Component template implementation function, will call presents ɵ ɵ property function, Expand the Angular directive wrapped in brackets: Update a property on a selected element.

Element points to the input control:

The name of the attribute you want to add to the input TAB is form:

Through the inside of the normalizeDebugBindingValue after regularization processing property form, the return value:

ng-reflect-form

The value of the input ng-reflect-form attribute to be written:

In order to avoid the value of the value is too complex, serialized json generated characters of the bed is too big, polluted the native HTML, simply call the toString function in normalizeDebugBindingValue: // Limit the size of the value as otherwise the DOM just gets polluted.

This is where the object object finally found in Chrome developer Tools came from:

important takeaway

SetNgReflectProperty function

More of Jerry’s original articles can be found in “Wang Zixi” :