chercher des données en forme angulaire2

Question

J'essaie de récupérer les données des utilisateurs en forme, mais je suis incapable de le faire, s'il vous plaît aidez-moi, voici mon code.

Je veux obtenir les données chargées dans le formulaire d'édition sur OnInit(), j'utilise angulaire 4, et le backend est .Net MVC, et aussi expliquer ce qui ne va pas dans mon code.

Code

pour le composant de liste Entrez le code ici

`<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>` 

ici est le code html du formulaire de modification composant

`<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>` 

ici est le code de formulaire de modification 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

Commencez par créer un tableau avant votre boucle (après l'extraction des données):

let newFormArray: FormGroup[] = []; 

Dans votre boucle:

newFormArray.push(this.fb.group({ FirstName: [cont[i].FirstName, Validators.required], LastName: [cont[i].LastName, Validators.required] //... 
})); 

ensuite faire votre formulaire:

 this.form = this.fb.group({ 
     array: this.fb.array(newFormArray) 
    }) 

Importations: import { FormControl, FormArray, FormGroup, FormBuilder, Validators } from '@angular/forms';