簡單的Component代碼：

import { Component } from '@angular/core'; import { FormControl } from '@angular/forms';@Component({selector: 'app-reactive-favorite-color',template: `Favorite Color: <input type="text" [formControl]="favoriteColorControl">` }) export class ReactFormComponent {favoriteColorControl = new FormControl(''); }

如下圖所示：ng-reflect-form這個屬性運行時是如何生成的？

bootstrap里調用_loadComponent：

changeDetectorRef的策略：RootViewRef：

ComponentRef指向的AppComponent，能看到Component的property：

loadComponent里顯式調用tick：

tick函數里進行change detect：

Angular Component html里加了方括號的Directive，瀏覽器是無法識別的，在Angular core.js里，在執行Component template實現函數時，會調用Angular的??property函數，將中括號包裹的Angular指令展開：Update a property on a selected element.

element指向input控件：

需要添加到input標簽頁的屬性名稱為form:

經過normalizeDebugBindingValue里面的正則化處理完屬性form之后，返回的值：

ng-reflect-form

待寫入input ng-reflect-form屬性的值：

為了避免value的值過于復雜時，序列化生成的json字符床過大，污染了最后的原生html，在normalizeDebugBindingValue里只是簡單的調用toString函數：
// Limit the size of the value as otherwise the DOM just gets polluted.

這就是最后在Chrome開發者工具里看到的[object Object]的由來：

important takeaway

setNgReflectProperty函數

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。