Question

是否有可能使用对象定义而不是直接在组件中定义ReactiveForm组？

我代替，

formEdit = this.fb.group({
  id: [null],
  userName: [{ value: null, disabled: true }],
  email: [null, Validators.required],
  name: [null, Validators.required],
  nickName: [null, Validators.required]
});

使用类似的内容：

formEdit = this.fb.group(User);

在User类中，我相应地装饰了它的属性。

更新

最好在User类中定义装饰器，如下所示：

export class User {
    @required
    @disabled
    userName: string;

    @required
    @minValue(0)
    @maxValue(100)
    price: number;

   ...

}

Answer 1

我认为您正在寻找的是Angular中的Dynamic Forms。

根据《角度指南》：

构建手工制作的表单可能既昂贵又费时，特别是如果您需要大量手工表单，它们彼此相似，并且经常更改以适应快速变化的业务和法规要求。

基于描述业务对象模型的元数据动态创建表单可能更经济。

您必须进行一些初始设置，这可能很耗时。但是一旦解决了这些问题，表单的创建就非常简单了。

上面链接的文档提供了很好的指南和用例，在这些案例中，构建动态表单很有意义。

更新：

如果您不想更改模板，则必须创建一种方法，该方法可以根据您提供的配置为您生成FormGroup。但这又需要配置而不是POJO。

如果您仍然有兴趣，可以在这里开始：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  sampleObject = {
    id: { value: null },
    userName: { value: null, disabled: true },
    email: { value: null, validators: [Validators.required] },
    name: { value: null, validators: [Validators.required] },
    nickName: { value: null, validators: [Validators.required] }
  };

  formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = new FormGroup(this.createFormGroup(this.sampleObject));
    console.log(this.formGroup);
  }

  private createFormGroup(config) {
    const group = {};
    for(let key in config) {
      const itemConfig = config[key];
      group[key] = new FormControl(itemConfig.value, itemConfig.validators);
    }
    return group;
  }

}

注意：：这不适用于所有情况。如果您希望它在所有情况下都有效，则必须相应地改进createFormGroup方法。

这是您推荐的Working Sample StackBlitz。

使用对象定义定义FomGroup

更新

1 个答案:

更新：