<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

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)

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 => {

      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);


  }
}

@Injectable()
export class CustomerService{

    constructor(private http:Http){}


    getLoginDetails(){

        console.log("getLoginDetails")
        //return this.http.get(assets/login.json).map((response: Response) => response.json());
        return this.http.get('assets/login.json').map((response: Response) => response);

    }
}

<div class="container">

    <h1>Login</h1>

    <form (ngSubmit)="save()" [formGroup]="heroForm" #formDir="ngForm">


        <div [hidden]="formDir.submitted">

            <div class="form-group">

                <label for="username">username</label>
                <input id="username" class="form-control" formControlName="username">

                <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">

                    <div *ngIf="username.errors.required">
                        required
                    </div>
                    <div *ngIf="username.errors.minlength">
                        Please enter a valid email that does not exceed the character limit
                    </div>
                    <div *ngIf="username.errors.maxlength">
                        Please enter a valid email that does not exceed the character limit
                    </div>
                    <div *ngIf="username.errors.pattern">
                        Please enter a valid email address
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input id="password" class="form-control" formControlName="password" required>

                <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">

                    <div *ngIf="password.errors.required">
                        required
                    </div>
                    <div *ngIf="password.errors.minlength">
                        Please enter a password with minimum characters
                    </div>
                    <div *ngIf="password.errors.maxlength">
                        Please enter a password that does not exceed 30 characters
                    </div>

                </div>
            </div>



            <button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button>
            <!--<td colspan="2">
            <div class="alert alert-danger col-md-12" role="alert" *ngIf="!flag">
              <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {{errormsg}}
            </div>
          </td>-->


        </div>
    </form>