Alan Lee Alan Lee - 1 month ago 13
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

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.