Question

我正在开发一个Angular 6应用程序，该应用程序将连接到.Net Web Api后端以进行数据处理，并且我将有一些Angular模型类（模型）来代表数据库的每个表，我想能够使用该模型类创建表单。

让我们看一些代码示例：这就是我当前在onInit中创建表单的方式。

createForm() {
    this.vacancyForm = new FormGroup({
      number: new FormControl(),
      requester: new FormControl(),
      date: new FormControl(),
      position: new FormControl(),
      replacement: new FormControl(),
      discharge_date: new FormControl(),
      candidate: new FormControl(),
      contract_type: new FormControl(),
      working_day: new FormControl(),
      annual_salary: new FormControl(),
      business_division: new FormControl(),
      company: new FormControl(),
      workplace: new FormControl(),
      personal_division: new FormControl(),
      department: new FormControl(),
      cost_center: new FormControl(),
      workplace_address: new FormControl()
    });
  }

它工作正常，但是这种空缺形式代表了我数据库中的一个表，而我想做的就是拥有一个具有所有这些属性的Typescript类Vacancy，并以类似于以下方式的方式实例化表单： / p>

空缺（vacancy.ts）：

export class Vacancy {

  number: number
  date: Date
  requester: string
  ...
  constructor(  ) { }
}

空缺表格（vacancy-form.component.ts）

var _vacancy = new Vacancy();
this.vacancyForm = new FormGroup(_vacancy); // => let's say, the definition of the form is taken from the class fields.

我不知道这是否有意义，或者这不是Angular工作（或可以工作）的方式，但是想象表中的某些字段发生变化，那么您不仅需要修改模型类，还需要修改还有表单定义，我希望将它们绑定（链接或应调用），因此您只需修改模型，表单将模型作为输入定义。

有可能吗？

我要补充一点，我不是在寻找一种方法来遍历类的属性，然后通过循环创建表单定义，而不是完全（如果值得的话我会考虑）而是内置的将表单定义链接到类属性的方法。

非常感谢。

Answer 1

首先，将所有属性包含在这样的数组中：

vacancyProperties: string[] = {
    'number',
    'requester',
    'date',
    ...
    'workplace_address'
}

之后，您可以在vacancyProperty数组上创建from组迭代。

const group = {}
vacancyProperties.forEach(property => group[property] = new FormControl());
this.vacancyGroup = new FormGroup(group);

您必须注意group[property]在对象中创建一个字段property。例如，如果property = 'date'，它将创建

{
    ....
    date: new FormControl()
    ...
}

Angular 6：从模型类创建表单

1 个答案: