Alan Lee Alan Lee - 1 year ago 146
TypeScript Question

angular2 form default input value doesn't set when initial click

I'm a beginner angular2 programmer and studying it now.

I'm creating a form that when user clicks a employee, it shows editable form with employee's current data. But, when I click a user first time (even click the same user again), user's information doesn't come up to input value.

<!-- User list part-->
<table>
<tr *ngFor="let emp of employees" (click)="empBtn(emp.empId)">
<td>{{ emp.empName }}</td>
<td>{{ getDepartName(emp.departId) }}</td>
<td>{{ emp.empPhone }}</td>
<td>{{ emp.wages.wage }}</td>
</tr>
</table>

<!-- Editable part -->
<button (click)="addBtn()">Add</button>
<div *ngIf="modeAdd || modeEdit">
<form #form ="ngForm" (ngSubmit) = "onSubmit(form.value)">
<label>Name </label><input type="text" name="name" value="{{ eName }}" ngModel>
<label>Department </label><select name="depart" value="{{ eDepartment }}" ngModel><option *ngFor="let depart of departments">{{ depart.departName }}</option></select>
<label>Phone </label><input type="text" value="{{ ePhone }}" name="phone" ngModel>
<label>Wage </label><input type="text" value="{{ eWage }}" name="wage" ngModel>
<button type="submit">Submit</button>
</form>
</div>


But, If I click another user, it shows values inside form's input tags. I was able to solve this with setting
eName
,
eDepartment
,
ePhone
,
eWage
as two-way binding with like
[(ngModule)]="eName"
, but I don't know why my code doesn't work correctly.

This is typescript part. empBtn is called when user click a user and it sets
eName
,
eDepartment
,
ePhone
,
eWage
. FYI, even though I declare default value on
eName
,
eDepartment, ...
it doesn't come up as well. Thank you for your consideration.

eName: string;
eDepartment: string;
ePhone: string;
eWage: number;

empBtn(empId: number): void {
console.log('click Employee ID: ', empId);
this.getEmployee(empId);
this.modeAdd = false;
this.modeEdit = true;
}

getEmployee(employeeId: number){
let selectedEmp: Employee = this.employeesObj.getEmployee(employeeId);
if(!selectedEmp){
console.log("employees: Invalid Employee ID");
}else{
console.log("employees: Get Employee info",selectedEmp.empName);
this.eName = selectedEmp.empName;
this.eDepartment = this.getDepartName(selectedEmp.departId);
this.ePhone = selectedEmp.empPhone;
this.eWage = selectedEmp.wages.wage;
}
}

Answer Source

I suggest you to study reactive form but with this problem.

http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

HTML

<form [formGroup]="form" (ngSubmit) = "onSubmit(form.value)">
    <label>Name </label>
    <input type="text" formControlName="eName">

    <label>Department </label>
    <select formControlName="eDepartment">
        <option *ngFor="let depart of departments">{{ depart.departName }}</option>
    </select>

    <label>Phone </label>
    <input type="text" formControlName="ePhone">

    <label>Wage </label>
    <input type="text" formControlName="eWage">
    <button type="submit">Submit</button>
</form>

importing modules

import { Component, OnInit} from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

On your component

form: FormGroup; // declare form as formgroup
eName: string;
eDepartment: string;
ePhone: string;
eWage: number;

constructor(private fb: FormBuilder){ }

ngOnInit() {
    this.updateForm()
}

updateForm(): void {
    this.form = this.fb.group({
        eName: [this.eName, Validators.required],
        eDepartment: [this.eDepartment, Validators.required],
        ePhone: [this.ePhone, Validators.required],
        eWage: [this.eWage, Validators.required],
    })
}

empBtn(empId: number): void {
    console.log('click Employee ID: ', empId);
    this.getEmployee(empId);
    this.modeAdd = false;
    this.modeEdit = true;

    this.updateForm();
}

getEmployee(employeeId: number){
    let selectedEmp: Employee = this.employeesObj.getEmployee(employeeId);
    if(!selectedEmp){
        console.log("employees: Invalid Employee ID");
    }else{
        console.log("employees: Get Employee info",selectedEmp.empName);
        this.eName = selectedEmp.empName;
        this.eDepartment = this.getDepartName(selectedEmp.departId);
        this.ePhone = selectedEmp.empPhone;
        this.eWage = selectedEmp.wages.wage;
    }
}

Last year, I'm also doing the same way you did. For me, reactive forms are better. You can also search for the FormBuilder and Validators.

Hope it helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download