title: Angular 2 TD form cannot setValue or patchValue to span tag, button
body: <p>I have a simple angular template driven form with few inputs, span tags and button. I need to setValue to form from an object in my component.</p>
  
  <p>I'm unable to setValue to span and button tags and I get the below error.</p>
  
  <pre><code>core.js:1365 ERROR Error: Uncaught (in promise): Error: No value accessor for form control with path: 'userSettings -&gt; id'
  Error: No value accessor for form control with path: 'userSettings -&gt; id'
    at _throwError (forms.js:1901)
    at setUpControl (forms.js:1771)
    at resolvedPromise.then (forms.js:3851)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3988)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:870
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3979)
    at _throwError (forms.js:1901)
    at setUpControl (forms.js:1771)
    at resolvedPromise.then (forms.js:3851)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3988)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:870
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3979)
    at resolvePromise (zone.js:821)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3979)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:594)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:499)
    at invokeTask (zone.js:1536)
    at HTMLAnchorElement.globalZoneAwareCallback (zone.js:1562)
  </code></pre>
  
  <p>My form html code</p>
  
  <pre><code>&lt;form class="form-horizontal" role="form" (ngSubmit)="onSettingUpdateSubmit()" #settingsForm="ngForm" &gt;
  &lt;fieldset ngModelGroup="userSettings"&gt;
    &lt;legend&gt;&lt;strong&gt;Account Settings&lt;/strong&gt;&lt;/legend&gt;
    &lt;br&gt;
  
    &lt;div class="form-group row"&gt;
      &lt;label class="col-md-3  col-form-label text-md-right"&gt;Id&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
        &lt;span class="fw-semi-bold" [ngModel]="id" id="id" name="id"&gt;{{ id }}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group row"&gt;
      &lt;label for="firstName" class="col-md-3  col-form-label text-md-right"&gt;First Name&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
        &lt;input type="text"
               id="firstName"
               required
               [ngModel]="firstName"
               name="firstName"
               class="form-control"
               placeholder="Your first name"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group row"&gt;
      &lt;label class="col-md-3  col-form-label text-md-right"&gt;Active&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
        &lt;button type="button"
                id="active"
                [value]="active"
                [ngModel]="active"
                name="active"
                [ngClass]="active ? 'btn btn-success' : 'btn btn-danger'"
                (click)="onActiveMode()"&gt;{{ active ? 'Yes' : 'No'}}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;div class="form-actions"&gt;
    &lt;div class="btn-block text-center"&gt;
      &lt;button type="submit"
              class="btn btn-primary"
  
              [disabled]=!settingsForm.valid&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The settingsService in my component will return an object from my API as below object. </p>
  
  <pre><code>{
      "id":"12345",
      "firstName":"Victor",
      "active":true
  }
  </code></pre>
  
  <p>My settings.compontent.ts</p>
  
  <pre><code>export class SettingsComponent implements OnInit {
  
   ngOnInit() {
        this.settingsService.getUserSettings('12345')
           .subscribe(
                 (response: UserSettings) =&gt; {
  
                      console.log(response);
  
                      // this.settingForm.setValue({
                      //   userSettings: response
                      // });
  
                      this.settingForm.form.patchValue({
                         userSettings: response
                      });
                  },
                  (error) =&gt; console.log(error)
               );
             }
  
   onSettingUpdateSubmit() {
       console.log(this.settingForm.value.userSettings);
   }
  }
  </code></pre>
  
  <p>When I click the button Update in my form it returns all the complete object with values (preset in my component for testing purpose).</p>