fetch Data into angular2 form - asp.net-mvc

Question

i am trying to fetch users data back into form but i am unable to do so,
please help me,
here is my code.
i want to get the data loaded into the edit form on OnInit(), i am using angular 4 , and backend is .Net MVC,
and also explain what's wrong in my code.
code for list component
enter code here
`<table class="table table-hover">
<thead>
<tr>
<th>Contact ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone </th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let contact of contacts">
<td>{{ contact.ContactID }}</td>
<td>{{ contact.FirstName }}</td>
<td>{{ contact.LastName }}</td>
<td>{{ contact.Phone }}</td>
<td>{{ contact.Email }}</td>
<a [routerLink]="['/contactedit', contact.ContactID]">Edit</a>
<!-- <td><a (click) = "onEdit( contact.ContactID )" class="btn btn-primary" >Edit</a> </td> -->
<td><a (click) = "onDelete( contact.ContactID)" class="btn btn-primary" >Delete</a></td>
</tr>
</tbody>
</table>`
here is the html of edit form component
`<form
[formGroup] = "form"
(ngSubmit) = "onSubmit(form.value)">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="FirstName" placeholder="Enter email" formControlName="FirstName">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="LastName" placeholder="Password" formControlName="LastName">
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<input type="tel" class="form-control" id="Phone" placeholder="Password" formControlName="Phone">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Password" formControlName="Email" >
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Update</button>
<button type="reset" class="btn btn-default">Clear</button>
</form>`
here is the code of edit form component.ts
`import { Component , OnInit } from '#angular/core';
import { FormBuilder,Validators, FormGroup } from '#angular/forms';
import { Contact } from './contact.interface';
import { ActivatedRoute , Router } from '#angular/router';
import { MediaService } from './media.service';
import 'rxjs/add/operator/switchmap';
#Component({
selector: 'my-media-form',
//moduleId: module.id,
templateUrl: 'app/media-form.component.html'
})
export class MediaFormEditComponent implements OnInit {
id: string;
currentContact: Contact;
contactForm: FormGroup;
private sub: any;
form;
constructor(private router: Router,
private route : ActivatedRoute,
private formBuilder: FormBuilder,
private mediaService: MediaService){}
ngOnInit(){
debugger;
this.form = this.formBuilder.group({
FirstName: this.formBuilder.control('',Validators.required),
LastName: this.formBuilder.control('',Validators.required),
Email: this.formBuilder.control('', Validators.compose([Validators.required])),
Phone: this.formBuilder.control('',Validators.required)
});
this.sub = this.route.params
.map(params => params['id'])
.switchMap(id => this.mediaService.getContactById(id))
.subscribe((cont: Contact) => {
this.currentContact = cont;
this.contactForm.setValue({
FirstName : cont.FirstName,
LastName: cont.LastName,
Email: cont.Email,
Phone: cont.Phone
});
});
}
onSubmit(Data){
this.mediaService.UpdateContact(Data)
.subscribe(data => this.router.navigate(['contacts']));
}
}`

Answer 1

First create an array before your loop (after fetch data):
let newFormArray: FormGroup[] = [];
In your loop:
newFormArray.push(this.fb.group({ FirstName: [cont[i].FirstName, Validators.required], LastName: [cont[i].LastName, Validators.required] //...
}));
Then make your form:
this.form = this.fb.group({
array: this.fb.array(newFormArray)
})
Imports: import { FormControl, FormArray, FormGroup, FormBuilder, Validators } from '#angular/forms';