title: Error: There are no form controls registered with this group yet. If you're using ngModel,you may want to check next tick (e.g. use setTimeout)
body: <p>I am using template driven form and am trying to set the value of the form elements based on some object properties, however i face the following <img src="https://i.stack.imgur.com/d2Ub5.jpg" alt="Error"> on doing so.
  Also here is my code for the TD form and how i am trying to access it.</p>
  
  <p>.html file:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
      &lt;form (ngSubmit)="onAddDevice(f)" #f="ngForm"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-5 form-group"&gt;
            &lt;label for="name"&gt;Name&lt;/label&gt;
            &lt;input type="text" id="name" class="form-control" name="name" ngModel required&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2 form-group"&gt;
            &lt;label for="type"&gt;Type&lt;/label&gt;
            &lt;input type="text" id="type" class="form-control" name="type" ngModel required&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-5 form-group"&gt;
            &lt;label for="platform"&gt;Platform&lt;/label&gt;
            &lt;input type="text" id="platform" class="form-control" name="platform" ngModel required&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2 form-group"&gt;
            &lt;label for="udid"&gt;UDID&lt;/label&gt;
            &lt;input type="text" id="udid" class="form-control" name="udid" ngModel required&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;button class="btn btn-success" type="submit" [disabled]="!f.valid"&gt;Add&lt;/button&gt;
            &lt;button class="btn btn-danger" type="button"&gt;Delete&lt;/button&gt;
            &lt;button class="btn btn-primary" type="button"&gt;Clear&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.ts file:</p>
  
  <pre><code>  @ViewChild('f') deviceForm: NgForm;
    @Output() deviceAdded = new EventEmitter&lt;DeviceModel&gt;();
    editedItemIndex: number;
    editedDevice: DeviceModel;
  
    constructor(private deviceService: DeviceService, private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.route.params
        .subscribe(
          (params: Params) =&gt;{
              this.id = +params['id'];
              this.editMode = params['id'] != null;
              if ( this.editMode) {
                this.editedItemIndex = params['id'];
                this.editedDevice = this.deviceService.getDevice(params['id']);
                console.log(this.editedDevice.frame);
                this.deviceForm.setValue({
                  name: this.editedDevice.name,
                  platform: this.editedDevice.platform,
                  type: this.editedDevice.type,
                  udid: this.editedDevice.frame
                });
              }
          }
        );
    }
  </code></pre>
  
  <p>The problem is because of calling the setValue method on the form.</p>