title: Angular2 http observables - how to work with get of undefined?
body: <p>I tried to use service for validation am getting errors as listed below
  1:<strong>ERROR Error: formGroup expects a FormGroup instance. Please pass one in.</strong></p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div [formGroup]="myGroup"&gt;    
    &lt;input formControlName="firstName"&gt;    
  &lt;/div&gt;        
  </code></pre>
  
  <p>In your class: </p>
  
  <pre><code>this.myGroup = new FormGroup({    
     firstName: new FormControl()    
  });  
  </code></pre>
  
  <p>2.</p>
  
  <pre><code>ng:///AppModule/HeroFormReactiveComponent.ngfactory.js:95 ERROR TypeError: Cannot read property 'get' of undefined
      at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl (vendor.bundle.js:64292)
      at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl (vendor.bundle.js:64881)
      at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges (vendor.bundle.js:64799)
      at checkAndUpdateDirectiveInline (vendor.bundle.js:55512)
      at checkAndUpdateNodeInline (vendor.bundle.js:57011)
      at checkAndUpdateNode (vendor.bundle.js:56950)
      at debugCheckAndUpdateNode (vendor.bundle.js:57811)
      at debugCheckDirectivesFn (vendor.bundle.js:57752)
      at Object.View_HeroFormReactiveComponent_0._co [as updateDirectives] (ng:///AppModule/HeroFormReactiveComponent.ngfactory.js:218)
      at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:57737)  
  </code></pre>
  
  <p>I think I should use observable/ call back function so that we can call functions() after getting the data from service. But I am not sure how to do this... Thanks in advance</p>
  
  <p>TS: </p>
  
  <pre><code>export class HeroFormReactiveComponent implements OnInit {
    loginDetailsArray: any;
    detailsArray: any[];
    minLength: any;
    maxLength: any;
    pattern: any;
    // customerDetail: any[];
  
  
    hero = {
      username: '',
      password: '',
      email: ''
    };
    constructor(private customerService: CustomerService, private http: Http) {}
  
  
    heroForm: FormGroup;
  
  
    ngOnInit(): void {
  
      this.loginDetailsArray = new Object();
      this.detailsArray = new Array();
      this.loadLoginDetails();
  
  
  
    }
  
  
    functions() {
  
      console.log("print");
      console.log(this.loginDetailsArray);
  
      var minLength = this.loginDetailsArray.rules.username.minlength;
      var maxLength = this.loginDetailsArray.rules.username.maxlength;
      var pattern = this.loginDetailsArray.rules.username.pattern;
  
  
      this.heroForm = new FormGroup({
  
        'username': new FormControl(this.hero.username, [
          Validators.minLength(this.minLength),
          Validators.maxLength(this.maxLength),
          //  Validators.pattern(pattern),
        ]),
        'password': new FormControl(this.hero.password, [
          Validators.minLength(2),
          Validators.maxLength(30),
        ]),
      });
    }
  
    loadLoginDetails() {
  
      this.customerService.getLoginDetails().subscribe(res =&gt; {
  
        this.loginDetailsArray = res.json();
  
        this.functions();
  
      });
    }
  
  
  
  
    get username() {
      return this.heroForm.get('username');
    }
    get password() {
      return this.heroForm.get('password');
    }
  
    save() {
  
      console.log('Saved: ' + JSON.stringify(this.heroForm.value));
  
  
      this.detailsArray.push(this.heroForm.value);
  
  
    }
  }
  </code></pre>
  
  <p>SERVICE:</p>
  
  <pre><code>    @Injectable()
  export class CustomerService{
  
      constructor(private http:Http){}
  
  
      getLoginDetails(){
  
          console.log("getLoginDetails")
          //return this.http.get(assets/login.json).map((response: Response) =&gt; response.json());
          return this.http.get('assets/login.json').map((response: Response) =&gt; response);
  
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="container"&gt;
  
      &lt;h1&gt;Login&lt;/h1&gt;
  
      &lt;form (ngSubmit)="save()" [formGroup]="heroForm" #formDir="ngForm"&gt;
  
  
          &lt;div [hidden]="formDir.submitted"&gt;
  
              &lt;div class="form-group"&gt;
  
                  &lt;label for="username"&gt;username&lt;/label&gt;
                  &lt;input id="username" class="form-control" formControlName="username"&gt;
  
                  &lt;div *ngIf="username.invalid &amp;&amp; (username.dirty || username.touched)" class="alert alert-danger"&gt;
  
                      &lt;div *ngIf="username.errors.required"&gt;
                          required
                      &lt;/div&gt;
                      &lt;div *ngIf="username.errors.minlength"&gt;
                          Please enter a valid email that does not exceed the character limit
                      &lt;/div&gt;
                      &lt;div *ngIf="username.errors.maxlength"&gt;
                          Please enter a valid email that does not exceed the character limit
                      &lt;/div&gt;
                      &lt;div *ngIf="username.errors.pattern"&gt;
                          Please enter a valid email address
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="password"&gt;Password&lt;/label&gt;
                  &lt;input id="password" class="form-control" formControlName="password" required&gt;
  
                  &lt;div *ngIf="password.invalid &amp;&amp; (password.dirty || password.touched)" class="alert alert-danger"&gt;
  
                      &lt;div *ngIf="password.errors.required"&gt;
                          required
                      &lt;/div&gt;
                      &lt;div *ngIf="password.errors.minlength"&gt;
                          Please enter a password with minimum characters
                      &lt;/div&gt;
                      &lt;div *ngIf="password.errors.maxlength"&gt;
                          Please enter a password that does not exceed 30 characters
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
              &lt;button type="submit" class="btn btn-default" [disabled]="heroForm.invalid"&gt;Submit&lt;/button&gt;
              &lt;!--&lt;td colspan="2"&gt;
              &lt;div class="alert alert-danger col-md-12" role="alert" *ngIf="!flag"&gt;
                &lt;span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"&gt;&lt;/span&gt; {{errormsg}}
              &lt;/div&gt;
            &lt;/td&gt;--&gt;
  
  
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>