CODEWITHSUNDEEP
angularforms
alessandro buffoli
alessandro buffoli

Reputation: 701

passing values inside a form in angular

I've created a page with tables to show data with the ngFor:

<tr *ngFor="let mission of missions">


    <td>1</td>
    <td>{{mission.cliente}}</td>
    <td>{{mission.luogo}}</td>
    <td>{{mission.materiale}}</td>
    <td>{{mission.nCassoni}}</td>
    <td>{{mission.operatore}}</td>
    <td>{{mission.nota}}</td>
    <td>2/12</td>
    <td>3</td>
    <td>2</td>
    <td nowrap>
        <span class="dropdown">
            <div class="dropdown-menu dropdown-menu-right">
               <a (click)="editMission(mission);" class="dropdown-item"><i class="la la-edit"></i> Modifica dettagli</a>
            </div>
         </span>
            <i class="la la-edit"></i>
         </a>
</td>

for each row there is an edit button (click)="editMission(mission); that pass the data mission: 

cliente: "mario"
id: "HKJaQxnATtPtiIDCmnHx"
luogo: "cremona"
materiale: "Gomma"
nCassoni: 3
nota: ""
operatore: "Mario Rossi"

And calls the function editMission inside my component:

editMission(mission){
console.log(mission); //this log into the console my mission json data
  if (this.showHideEditMission == false)
        this.showHideEditMission = true;
    else this.showHideEditMission = false;
}

to show the div that contains the form:

<div *ngIf="showHideEditMission" class="ng-hide m-portlet m-portlet--full-height ">
  <form #form="ngForm" (ngSubmit)="create(form.value); form.reset();" >
    <div class="m-portlet__body">
        <div class="form-group m-form__group">
            <label >Cliente</label>
            <input required ngModel name="cliente" #cliente="ngModel" value="mission.cliente" id="cliente" class="form-control m-input" placeholder="Inserisci il nome del Cliente" >

        </div>
    </div>
  </form>
</div>

Now, how can I show the value mission.cliente inside the input field?

Thankyou.

UPDATE I've tried with [(ngModel)]="mission.cliente" but it doesn't work.

Upvotes: 0

Views: 280

Answers (2)

Gopal
Gopal

Reputation: 673

<form #form="ngForm" >
      <label >Cliente</label>
      <input required [(ngModel)]='mission.cliente' name="cliente" id="cliente" placeholder="Inserisci il nome del Cliente" >
</form>

in component declare a variable named mission.

mission: any = {};
editMission(mission){
    this.mission = mission;
}

Upvotes: 1

ahbon
ahbon

Reputation: 512

<input required [(ngModel)]="mission.cliente" name="cliente" #cliente="ngModel" id="cliente" class="form-control m-input" placeholder="Inserisci il nome del Cliente" >

Use [(ngModel)] instead of value.

Upvotes: 0

Related Questions