初始单击时未设置angular2表单默认输入值

Question

我是一个初学者 angular2 程序员，现在正在学习它。

我正在创建一个表单，当用户单击员工时，它会显示包含员工当前数据的可编辑表单。但是，当我第一次点击一个用户（甚至再次点击同一个用户）时，用户的信息并没有达到输入值。

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

但是，如果我点击另一个用户，它会在表单的输入标签中显示值。我可以通过将eName、eDepartment、ePhone、eWage 设置为与[(ngModule)]="eName" 之类的双向绑定来解决此问题，但我不知道为什么我的代码无法正常工作。

这是打字稿部分。 empBtn 在用户单击用户时调用，它设置eName、eDepartment、ePhone、eWage。仅供参考，即使我在eName、eDepartment, ... 上声明默认值，它也不会出现。谢谢您的考虑。

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 1

我建议你研究反应形式，但有这个问题。

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>

导入模块

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

在你的组件上

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

去年，我也在做和你一样的事情。对我来说，反应形式更好。您还可以搜索 FormBuilder 和 Validators。

希望对你有帮助。