<p dir="auto">I'm submitting a</p>
<p dir="auto">[x] bug report<br>
[ ] feature request<br>
[ ] support request</p>
<p dir="auto"><strong>Current behavior</strong><br>
When using angular model driven form and binding one Form Control to multiple inputs, then after editing one of these inputs, the value in Form Control is properly updated, but the other inputs views do not get updated</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The expected behavior in my point of view should be, that all the inputs bound to one Form Control should show the same value, when one of the inputs gets edited</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
The behaviour can be observed in the following <a href="http://plnkr.co/edit/o2r9WGhHRLc8uZAgeROK?p=preview" rel="nofollow">plunk</a><br>
There can be seen, that editing one text box does not update the other text box, but updates (as expected) the following interpolated text, which is also bound to the value of the Form Control.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Sometimes it can be useful to have two or more inputs bound to one Form Control at the same time. In my use case, I would like to have a table, which allows for editing records both inline inside a row and in a detail that can be expanded below every such row. In this case, two inputs come into existence. But other use cases come to mind and are in use in various web or desktop applications.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.2</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all]</p>
</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
[ ] 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>
When updating a value through a form field that uses the formControl directive, the view isn't updated. When, say, two fields hold the same form control, changing one does NOT change the other.</p>
<p dir="auto">This <strong>does happen</strong> when using NgModel, and <strong>does happen</strong> when calling <code class="notranslate">formControl.setValue(newVal)</code></p>
<p dir="auto"><strong>Expected behavior</strong><br>
Behaviour is expected to be the same in NgModel as when using Reactive FormControls</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/LXyo6uHdbEpP3feudYoo?p=preview" rel="nofollow">http://plnkr.co/edit/LXyo6uHdbEpP3feudYoo?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
The contract custom form fields have when using the <code class="notranslate">ControlValueAccessor</code> interface is broken. A good example is <a href="http://valor-software.com/ng2-bootstrap/#/buttons#radio" rel="nofollow">http://valor-software.com/ng2-bootstrap/#/buttons#radio</a> - which works currently only with NgModel, as it requires updating the view on all relevant buttons on value change.</p>
<p dir="auto">When using a set of buttons with reactive forms, currently, a <code class="notranslate">(click)</code> based hack needs to be put in place:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;btn-group&quot;&gt;
    &lt;label 
        class=&quot;btn btn-primary&quot; 
        formControlName=&quot;privateApplication&quot;
        (click)=&quot;form.get('privateApplication').setValue(false)&quot;
        [btnRadio]=&quot;false&quot;&gt;
            {{'LABEL_PUBLIC' | translate}}
    &lt;/label&gt;
    &lt;label 
        class=&quot;btn btn-primary&quot; 
        formControlName=&quot;privateApplication&quot; 
        (click)=&quot;form.get('privateApplication').setValue(true)&quot;
        [btnRadio]=&quot;true&quot;&gt;
            {{'LABEL_PRIVATE' | translate}}
    &lt;/label&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">btn-group</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> 
        <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary</span>" 
        <span class="pl-c1">formControlName</span>="<span class="pl-s">privateApplication</span>"
        <span class="pl-c1">(click)</span>="<span class="pl-s">form.get('privateApplication').setValue(false)</span>"
        <span class="pl-c1">[btnRadio]</span>="<span class="pl-s">false</span>"<span class="pl-kos">&gt;</span>
            {{'LABEL_PUBLIC' | translate}}
    <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> 
        <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary</span>" 
        <span class="pl-c1">formControlName</span>="<span class="pl-s">privateApplication</span>" 
        <span class="pl-c1">(click)</span>="<span class="pl-s">form.get('privateApplication').setValue(true)</span>"
        <span class="pl-c1">[btnRadio]</span>="<span class="pl-s">true</span>"<span class="pl-kos">&gt;</span>
            {{'LABEL_PRIVATE' | translate}}
    <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OS Not relevant</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome 55</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2</p>
</li>
</ul>