Shulou(Shulou.com)06/01 Report--

Angular form control native HTML code ng-reflect-form attribute and its value generation timing is what, for this problem, this article details the corresponding analysis and solution, hoping to help more want to solve this problem of small partners to find a simpler and easier way.

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

As shown below: ng-reflect-form How is this property generated at runtime?

Bootstrap calls_loadComponent:

changeDetectorRef policy: RootViewRef:

AppComponent pointed to by ComponentRef, you can see the property of Component:

explicitly call tick in loadComponent:

Change detect in tick function:

Angular Component html has square bracketed Directive, which is not recognized by browsers. In Angular core.js, when executing Component template implementation function, Angular's property function will be called to expand Angular instructions wrapped in square brackets: Update a property on a selected element.

Element input control:

The attribute name you need to add to the input tab is form:

After the regularization in normalizeDebugBindingValue completes the property form, the returned value:

ng-reflect-form

Value to be written to input ng-reflect-form attribute:

In order to avoid the value value is too complex, the serialized json character bed is too large, polluting the final native html, in normalizeDebugBindingValue just simply call the toString function:

// Limit the size of the value as otherwise the DOM just gets polluted.

This is where the last [object Object] seen in Chrome Developer Tools came from:

About Angular form control native HTML code ng-reflect-form attribute and its value generation timing is what the answer to the question is shared here, I hope the above content can be of some help to everyone, if you still have a lot of doubts not solved, you can pay attention to the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.