NgFormModel NgControl read value - angularjs

Question

I have a form where I have already values in the input text field. After the submit button (changes) the unchanged input field returns a empty string in the json object.
//the component
this.builder = fb;
this.EditUserForm = this.builder.group({
firstName: ["", Validators.required],
lastName: ["", Validators.required],
});
<form [ngFormModel]="EditUserForm" (submit)="saveChanges($event)">
<div class="col-xs-2">
<label for="firstname">First Name</label>
<input class="form-control" id="firstname" ngControl="firstName" type="name" required value={{person.firstName}}>
</div>
<div class="col-xs-2" >
<label for="lastname">Last Name</label>
<input class="form-control" id="lastname" ngControl="lastName" type="name" required value={{person.lastName}}>
</div>
<div class="container">
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
As you can see I have already values in the input. But the ngControl does not take this. Only when I put a change value in the input text field. It shows the value person.firstname but does not read it in ngControl

Answer 1

Other answer would be (with your setup),
You can make use of [(ngModel)] directive which actally binds your value to input control and updates ngCtrl status.
<input ... [(ngModel)]="person.firstName" #firstName="ngForm" ...>
Look at here working example of the same,
https://plnkr.co/edit/hvAG3lLpfP80U9hMKAEA?p=preview

Answer 2

you have to use [ngFormControl] for binding the controls in the template.
//the component
this.builder = fb;
this.EditUserForm = this.builder.group({
firstName: ["", Validators.required],
lastName: ["", Validators.required],
});
<form [ngFormModel]="EditUserForm" (submit)="saveChanges(EditUserForm.values)">
<div class="col-xs-2">
<label for="firstname">First Name</label>
<input class="form-control" id="firstname" [ngFormControl]="EditUserForm.controls['firstname']" type="name" required value={{person.firstName}}>
</div>
<div class="col-xs-2" >
<label for="lastname">Last Name</label>
<input class="form-control" id="lastname" [ngFormControl]="EditUserForm.controls['lastname']" type="name" required value={{person.lastName}}>
</div>
<div class="container">
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>