passing values inside a form in angular

Question

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.

Gopal · Accepted Answer · 2019-02-28 15:38:14Z

1

<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;
}

answered Feb 28, 2019 at 15:38

Gopal

67312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ahbon · Accepted Answer · 2019-02-28 14:37:06Z

0

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

answered Feb 28, 2019 at 14:37

ahbon

5115 silver badges21 bronze badges

5 Comments

alessandro buffoli Over a year ago

this doesn't work, maybe because i'm generation the row mission with *ngFor="let mission of missions"? Any other solution?

ahbon Over a year ago

If your input is in a ngFor loop you should have unique name attribute. For instance: name=mission_{{ mission.id }}

alessandro buffoli Over a year ago

the ngFor loop is my output to create the rows in the table. From there I click edit, my purpose is to pass the atributes ot that row inside my form.

ahbon Over a year ago

Please provide an example that reproduces your issue.

ahbon Over a year ago

Try to remove the #cliente="ngModel" but I think you should create a Stackblitz to show the problem

Collectives™ on Stack Overflow

passing values inside a form in angular

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related