Question

我是DRY（不要重复自己）概念的强硬派。现在我正在研究Angular 2 API Reference并且找不到创建表单的更短方法：

import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {EmployeeSharedService} from "../employee-shared.service";
import {Employee} from "../employee";
import {EmployeeService} from "../employee.service";
import {FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'employee-detail',
  providers: [ EmployeeService, CityService ],
  templateUrl: './employee-detail.component.html',
  styleUrls: ['./employee-detail.component.css']
})
export class EmployeeDetailComponent implements OnInit, OnChanges {

  constructor(private employeeService:EmployeeService, private cityService:CityService, private employeeSharedService:EmployeeSharedService) { }

  createForm() { // how to shorten this?
    this.employeeForm = new FormGroup({
      empId:new FormControl(),
      firstName:new FormControl(),
      lastName:new FormControl(),
      gender:new FormControl(),
      dateOfBirth:new FormControl(),
      nationality:new FormControl(),
      maritalStatus:new FormControl(),
      phone:new FormControl(),
      city:new FormControl(),
      subDivision:new FormControl(),
      status:new FormControl(),
      suspendDate:new FormControl(),
      hiredDate:new FormControl(),
      grade:new FormControl(),
      division:new FormControl(),
      email:new FormControl()
    });
  }

  setFormValue() {    // see, this is can be shortened
    this.employeeForm.setValue(this.selectedEmployee);
  }

  resetFormValue() {  // see, this is can be shortened
    this.employeeForm.reset(this.selectedEmployee);
  }

  nullifyFormValue() {   // see, this is can be shortened
    this.employeeForm.reset(new Employee());
  }
}

因为我已经有类Employee这样的

export class Employee {
  empId?:number;
  firstName:string;
  lastName:string;
  gender:string;
  dateOfBirth:Date;
  nationality:string;
  maritalStatus:string;
  phone:string;
  city: City;
  subDivision:string;
  status:string;
  suspendDate:Date;
  hiredDate:Date;
  grade:string;
  division:string;
  email:string;
  profilePicture?:string;
}

我可以缩短重置表单或设置值。但是如何缩短表单创建？

Answer 1

使用FormBuilder：

....
import { FormBuilder } from '@angular/forms';
.....

constructor(private employeeService:EmployeeService, private cityService:CityService, private employeeSharedService:EmployeeSharedService, private fb: FormBuilder) { }

  createForm() { // how to shorten this?
    this.employeeForm = this.fb.group({
      empId: '',
      firstName: '',
      lastName:'',
       .....
    });
   .....

Check out the docs了解详情。

Answer 2

我认为以下可能就是你要找的东西。

改为接口:)创建该接口的实例可以像：employee: Employee: <Employee>{}那样完成，但是这不会给你正在寻找的属性键，所以让我们创建一个这样做的函数。以下代码示例与您的代码缩短。功能：

export function createEmployee(empId?:number,firstName?:string): Employee {
  return {
    empId,
    firstName
  }
}

将该功能导入您的组件并创建员工：

employee = createEmployee();

现在我们有了可以迭代的属性并根据它们创建表单：

ngOnInit() {
  this.employeeForm = new FormGroup({});
  this.setValues();
}

setValues() {
  for(let key in this.employee) {
    this.employeeForm.addControl(key, new FormControl(''))
  }
}

现在我们拥有所有表单字段，现在您可以在模板中写下所有不同的formControlName的缩写。也许你想缩短它？

创建一个管道，它将迭代表单组：

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)
    }
}

然后模板让我们使用它：

<form [formGroup]="employeeForm">
  <div *ngFor="let key of employeeForm.controls | keys">
    <label>{{key}}: </label>
    <input [formControlName]="key" />
  </div>
</form>

但是如上所述，你也可以跳过表单的迭代并写下它们：）

这是一个

Angular 2新FormControl（）的更短代码

2 个答案:

Demo