title: Issue with @Input, ngOnInit() and formGroup
body: <p>I am strugling with this in angular (5) :</p>
  
  <p>I want to have a form initialized with somes values.</p>
  
  <p>To do so, I created a component "group-detail".</p>
  
  <p>For the html part of this component (group-detail.component.html), I have the following :</p>
  
  <pre><code>&lt;div *ngIf="group"&gt;
    ...
    &lt;!-- Stuff before the form like ({{group.questionGroupId}} --&gt;
    ...
    &lt;form [formGroup]="formGroup" class="group-detail-form"&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Group Name" formControlName="groupName" required&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Creation Date" formControlName="creationDate"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field *ngIf="group.lastModificationDate"&gt;
        &lt;input matInput placeholder="Last Modification " formControlName="lastModificationDate"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field *ngIf="group.isDeleted == true"&gt;
        &lt;input matInput placeholder="Deleted" formControlName="isDeleted"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field *ngIf="group.deletedOn"&gt;
        &lt;input matInput placeholder="Deleton on" formControlname="deletedOn"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Description" formControlname="description"&gt;
      &lt;/mat-form-field&gt;
    &lt;/form&gt;
    ...
    &lt;!-- Stuff after the form (buttons, ...) --&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>So I have a formGroup ("formGroup") containing a few inputs with a formControlName.  </p>
  
  <p>In the component typescript, I have the following :</p>
  
  <pre><code>export class GroupDetailComponent implements OnInit {
  
    @Input() group: Group;
  
    formGroup: FormGroup;
  
    constructor(
      private route: ActivatedRoute,
      private qgroupService: QGroupService,
      private location: Location
    ) { 
        this.formGroup = new FormGroup({
          groupName: new FormControl({ value: ''}, [Validators.required, Validators.minLength(3)]),
          creationDate: new FormControl({ value: '', disabled: true }),
          lastModificationDate: new FormControl({ value: '', disabled: true }),
          isDeleted: new FormControl({ value: '', disabled: true }),
          deletedOn: new FormControl({ value: '', disabled: true }),
          description: new FormControl({ value: '' })
        });
      }
  
      ngOnInit() {
        this.getGroup();
        this.formGroup = new FormGroup({
          groupName: new FormControl({ value: this.group.groupName }, [Validators.required, Validators.minLength(3)]),
          creationDate: new FormControl({ value: this.group.creationDate, disabled: true }),
          lastModificationDate: new FormControl({ value: this.group.lastModificationDate, disabled: true }),
          isDeleted: new FormControl({ value: this.group.isDeleted, disabled: true }),
          deletedOn: new FormControl({ value: this.group.deletedOn, disabled: true }),
          description: new FormControl({ value: this.group.description })
        });
      }
  
      getGroup(): void {
        const id = +this.route.snapshot.paramMap.get('questionGroupId');
        this.qgroupService.getGroup(id).subscribe(group =&gt; this.group = group);
      }
  
  }
  </code></pre>
  
  <p>So, I have to make a new instance of formGroup in the constructor otherwise I get an error. After that, the ngOnInit() is supposed to fetch the group with a particular id and rebuild the form with values inside.<br>
  I know the qgroupService is returning the group, or at least, when I log from the method qgroupService.getGroup(), I have the group Object after the http get request.</p>
  
  <p>I don't understand yet is why i get this error :</p>
  
  <h3>TypeError: Cannot read property 'groupName' of undefined</h3>
  
  <p>Because I thought that getGroup() would return the group to </p>
  
  <h3>@Input group : Group</h3>
  
  <p>And that I could use it to remake my form with initial values.</p>
  
  <p>Maybe I'm complicating thing too much.</p>
  
  <p>Any advice would be appreciated (I'm still discovering Angular 5 and Typescript),</p>
  
  <p>Thank you in advance.</p>