title: There is no FormControl instance attached to form control element with name
body: <p>I have created a form in Angular 2 with which users can edit a <code>SearchProfile</code> which they can select from a list. Initially everything works fine but when i select a different item from the list of <code>SearchProfile</code>s I receive the following exception:
  <code>There is no FormControl instance attached to form control element with name: controlName</code>.
  The whole thing consists of 3 elements: 2 components <code>SelectProfileComponent</code>, <code>SearchProfileComponent</code> and a service <code>ProfileService</code>. <code>ProfileService</code> contains the <code>ActiveProfile</code> which is the selected <code>SearchProfile</code> for editing.
  <code>ProfileService</code> looks like this:</p>
  
  <pre><code>@Injectable()
  export class ProfileService {
      private activeProfileSource = new ReplaySubject&lt;ISearchProfile&gt;();
      activeProfile$ = this.activeProfileSource.asObservable();
  
      constructor(private http: Http) {
          this.selectProfile();
      }
  
      public getSearchProfile(profileId: number = null): Observable&lt;ISearchProfile&gt; {
          let url = `&lt;url&gt;?profileid=${profileId}`;
          this.http.get(url).map((result) =&gt; {
              return &lt;ISearchProfile&gt;.result.json();
          });
      }
  
      public selectProfile(profileId: number = null) {
          this.getSearchProfile(profileId).subscribe((p) =&gt; {
              this.activeProfileSource.next(p);
          });
      }
  }
  </code></pre>
  
  <p><code>SelectProfileComponent</code> contains a list with profile which triggers a <code>change</code>-event when a <code>SearchProfile</code> is selected.</p>
  
  <pre><code>&lt;select (change)="setActiveProfile($event.target.value)"&gt;
      &lt;option *ngFor="let profile of profiles" [value]="profile.Id" [innerHtml]="profile.name"&gt;&lt;/option&gt;
  &lt;/select&gt;
  
  export class ProfileSelectionComponent implements OnInit {
      private profiles: ISearchProfile[] = null;
  
      constructor(private profileService: ProfileService) {}
  
      //get profiles logic
  
      public setActiveProfile(profileId: number): void {
          this.profileService.selectProfile(profileId);
      }
  }
  </code></pre>
  
  <p>The <code>SearchProfileComponent</code> has a <code>Subscription</code> to the <code>activeProfile</code> and should show the properties of the <code>activeProfile</code> so the user can edit them.
  <code>SearchProfileComponent</code> looks like this:</p>
  
  <pre><code>&lt;form [formGroup]="profileForm" *ngIf="!isLoading"&gt;
      &lt;input type="text" name="name" formControlName="name" [(ngModel)]="searchProfile.name" /&gt;
  &lt;/form&gt;
  
  export class SearchProfileComponent implements OnInit {
      private isLoading: boolean = true;
      private activeProfileSubscription: Subscription;
      private searchProfile: ISearchProfile = null;
      public profileForm: FormGroup;
  
      constructor(private profilService: ProfileService
          private formBuilder: FormBuilder) { }
  
      ngOnInit() {
          this.activeProfileSubscription = this.profileService.activeProfile$.subscribe((profile: ISearchProfile) =&gt; {
              this.searchProfile = profile;
              this.createForm();
              this.isLoading = false;
          });
      }
      private createForm() {
          this.profileForm = this.formBuilder.group({
              ["name"]: [this.searchProfile.name, null]
          });
      }
  }
  </code></pre>