CODEWITHSUNDEEP
javascriptangular
Pablo
Pablo

Reputation: 10602

Why is this field undefined in Angular2?

I have this template in Angular2:

<tr *ngFor="#user of users">
    <td>
        <label *ngIf="editing != user.id">{{ user.name }}</label>
        <input #username *ngIf="editing == user.id" value="{{ user.name }}" />
    </td>
    <td>
        <label *ngIf="editing != user.id">{{ user.lastname }}</label>
        <input #lastname *ngIf="editing == user.id" value="{{ user.lastname }}" />
    </td>
    <td>
        <label *ngIf="editing != user.id">{{ user.gender | genderPipe }}</label>
        <select #gender *ngIf="editing == user.id" value="{{ user.gender }}">
            <option value="0">
                {{ 0 | genderPipe }}
            </option>
            <option value="1">
                {{ 1 | genderPipe }}
            </option>
        </select>
    </td>
    <td>
        <img (click)="removeUser(user.id)" width="16px" class="pull-left" src="/images/close.png" />
        <img (click)="editUser(user.id)" *ngIf="editing != user.id" class="pull-left" src="/images/edit.png" />
        <img (click)="saveUser(user.id, username)" *ngIf="editing == user.id" class="pull-left" src="/images/save.png" />
    </td>

I set the #username attribute to the first input. In the saveUser() when I send the username parameter, it is undefined.

Why is that? how can I fix the problem?

Upvotes: 1

Views: 326

Answers (1)

Langley
Langley

Reputation: 5344

You should use [(ngModel)] to update value of all property belongs to it instead of using value attribute with {{}} interpolated value.

Markup

<tr *ngFor="#user of users">
    <td>
        <label *ngIf="editing != user.id">{{ user.name }}</label>
        <input *ngIf="editing == user.id" [(ngModel)]="user.name" />
    </td>
    .....
    <td>
        .....
        <img (click)="saveUser(user)" *ngIf="editing == user.id" class="pull-left" src="/images/save.png" />
    </td>

Upvotes: 2

Related Questions