bonjour tous le monde 

je cherche a éditer un client , donc après le click sur l'ico editer je recupere le client d’après l'api rest :

après le click  un model apparaît :

normalement les champs doivent contenir  les infos du clients : c'est ça le probleme !

je que j'ai fait au niveau de mon code : en premier je passe l'id comme un input :

<app-modifier [idClient]="idCourant"></app-modifier>

au niveau du component app-modifier je récupère le client :

export class ModifierComponent implements OnInit {

  @Input() idClient:any
  client:Client;

  constructor(private serviceClient:ClientService) { }

  ngOnInit() {
  }

   getClient(){
    this.serviceClient.getClientById(this.idClient).subscribe(
      data=>{
        this.client=data;
        console.log(this.client);
      }
    );
   }
}

et au niveau du Template je fais : 

  <div class="form-group col-md-6">
               <input type="text" class="form-control" id="inputNom" placeholder="Nom" value="{{client.nom}}" required>
               <label for="inputNom" class="col-form-label">Nom</label>
  </div>

en fin j'ai l'erreur :  TypeError: Cannot read property  nom du undefined 

merci d'avance

-
Edité par TheLordOne 23 avril 2018 à 15:02:59

Salut,

Cette erreur est due au fait qu'Angular rend la page avant que ton API ne réponde.

Pour pallier à ce problème tu peux ajouter l'opérateur safe navigation, qui s'utilise facilement : {{ client?.nom }} ou [value]="client?.nom"

Par ailleurs,  je te recommande fortement d'utiliser les reactive form. Cela te permettra d'avoir un réel control sur ton formulaire, en plus d'être une librairie Angular.

-
Edité par 7umpy 23 avril 2018 à 23:25:55

merci pour votre réponse :

mais l'utilisation du {{ client?.nom }}on n'a aucun effet sur l'erreur toujours existe :

j'ai essayé d'utiliser les ReactiveForm malheureusement cela m'ajouter d'autre erreur : 

ModifierComponent.html:12 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

 erreur en image :

code ModifierComponent.html :

<div id="modifierClient" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="editClientLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
   <div class="modal-content">
       <div class="modal-header">
           <h5 class="modal-title" id="editClientLiveLabel">Modifier Un Client</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
           </button>
       </div>
       <div class="modal-body">
           <form  [formGroup]="form" >
             <div class="form-row">
                 <div class="form-group col-md-6">
                     <input type="text" class="form-control" id="inputNom"  [value]="client?.nom" name="nom"  formControlName="nom" required>
                     <label for="inputNom" class="col-form-label">Nom</label>
                 </div>
                 <div class="form-group col-md-6">
                     <input type="text" class="form-control" id="inputPrenom" placeholder="Prenom" value="{{client?.prenom}}" name="prenom" value="{{client?.prenom}}"  formControlName="prenom"   required>
                     <label for="inputPrenom" class="col-form-label" >Prenom</label>
                 </div>
             </div>
             <div class="form-group">
                 <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" name="adresse" value="{{client?.adresse}}" formControlName="adresse"  required>
                 <label for="inputAddress" class="col-form-label">Address</label>
             </div>
             <div class="form-group">
                 <input type="text" class="form-control" id="inputVille"
                        placeholder="Ex : Agadir" value="{{client?.ville}}" formControlName="ville"  required>
                 <label for="inputVille" class="col-form-label">Ville</label>
             </div>
           <div class="form-group">
             <input type="email" class="form-control" id="inputEmail" placeholder="exemple@exemple.com"  name="email" value="{{client?.email}}" formControlName="email" >                              
             <label for="inputEmail" class="col-form-label">Email</label>   
           </div>
           <div class="form-row">
             <div class="form-group col-md-6">
                 <input type="text" class="form-control" id="inputNom" placeholder="Profession" name="profession" value="{{client?.profession}}" formControlName="profession" >
                 <label for="inputProf" class="col-form-label">Profession</label>
             </div>
             <div class="form-group col-md-6">
                 <input type="text" class="form-control" id="inputPrenom" placeholder="0606060606" name="numTel" value="{{client?.numTel}}" formControlName="numTel" >
                 <label for="inputTele" class="col-form-label">Num Tele </label>
             </div>
             <div class="form-group col-md-6">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
               <button type="button" class="btn btn-primary" (click)="modifierClient()">Modifier</button>
           </div>
         </div> 
         </form>
              
     </div>
       
   </div>
</div>
</div>

modifierComponent .ts 

https://pastebin.com/jexV0Pz6

merci d'avance !