<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently if you return a new Date() from a getter into an ngModel it freezes up the browser.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
That it would not cause an infinite loop</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
have a getter method that returns a new Date() and put into an ngModel;<br>
<a href="http://plnkr.co/edit/I0i4h6pu9ZqGfJk3XTNy?p=info" rel="nofollow">http://plnkr.co/edit/I0i4h6pu9ZqGfJk3XTNy?p=info</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
to be able to use a generated Date in ngModel.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Ubuntu / Apache</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.1.0<br>
Also was doing this in 2.0.0</li>
<li><strong>Browser:</strong> [Chrome 53.0.2785.143]</li>
<li><strong>Language:</strong> [all | TypeScript 2.0.3]</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x ] bug report =&gt; search github for a similar issue or PR before submitting"><pre class="notranslate"><code class="notranslate">[x ] bug report =&gt; search github for a similar issue or PR before submitting
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">While implementing a custom <code class="notranslate">ControlValueAccessor</code> which should accept non-primitive model we can easily go into infinitive loop + browser crash. The work-around exists but is non-intuitive and requires boilerplate.</p>
<p dir="auto">This happens for the following condition: <code class="notranslate">&lt;custom-control [ngModel]="foo()"&gt;</code> where <code class="notranslate">foo()</code> returns returns objects (non-primitive value) and can return <em>different</em> objects for subsequent calls (equal in terms of content but not equal in terms of references).</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">People should be able to use functions when binding to <code class="notranslate">[ngModel]</code> as it was the case till recently (I believe that it used to work till RC4 or RC5 where async component was introduced into ngModel impl).</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">Here is a minimal plunker based on the real life scenario:  <a href="https://plnkr.co/edit/HlIgVEuZ3wfS5hFMjPFm?p=preview" rel="nofollow">https://plnkr.co/edit/HlIgVEuZ3wfS5hFMjPFm?p=preview</a></p>
<p dir="auto">In the above plunker there is a simple time-picker implementation that requires the following data structure as its input: <code class="notranslate">{hour: number, minute: number};</code>. It works fine when used as <code class="notranslate">&lt;time-picker [ngModel]="{hour: 13, minute: 30}"&gt;&lt;/time-picker&gt;</code>. But if a user wants to create <code class="notranslate">{hour: 13, minute: 30}</code> in a function call (ex. to convert internal string structure to a structure required by a date-picker) we go into infinitive loop.</p>
<p dir="auto">To see infinitive loop + browser crash uncomment the following line <code class="notranslate">&lt;time-picker [ngModel]="strToTime(timeAsStr)"&gt;&lt;/time-picker&gt;</code>.</p>
<p dir="auto"><strong>!!!WARNING!!!</strong> IT WILL CRASH YOUR BROWSER.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">People can use functions to convert model values from internal data structures in a component (ex. string in my plunker) to data structures required by a control. Conceptually we need a mechanism similar to parsers / formatters pipeline from Angular 1.x.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> all</li>
</ul>
<p dir="auto"><strong>Additional info:</strong></p>
<p dir="auto">Discuses this use case with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a> and was advised to ping <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kara/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kara">@kara</a><br>
The issue was originally raised in the <a href="https://ng-bootstrap.github.io/" rel="nofollow">https://ng-bootstrap.github.io/</a> project under <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="169410078" data-permission-text="Title is private" data-url="https://github.com/ng-bootstrap/ng-bootstrap/issues/545" data-hovercard-type="issue" data-hovercard-url="/ng-bootstrap/ng-bootstrap/issues/545/hovercard" href="https://github.com/ng-bootstrap/ng-bootstrap/issues/545">ng-bootstrap/ng-bootstrap#545</a></p>