使用 DRY（不要重复自己）原则创建 FormGroup 的好方法是什么？

Question

我不相信 Angular 中创建表单组的方式。

我创建这样的表格：

let form = this._formBuilder.group({
              nameAditionalCtrl: [adicional.nameAditional, [Validators.required]],
              typeClientPriceCtrl: [parseInt(adicional.typeClientPrice,10), [Validators.required]],
              priceClient: [parseInt(adicional.priceClient,10), [Validators.required, Validators.maxLength(5)]],
              who: [parseInt(adicional.who,10), [Validators.required]],
              typeRelayPrice: [parseInt(adicional.typeRelayPrice,10), Validators.required],
              relayPrice: [parseInt(adicional.relayPrice,10), Validators.required, Validators.maxLength(15)]
            })

但是最近我的表单中有大量字段，然后我开始创建这样的表单

this.form = this.formBuilder.group(this.data);

“data”是我手动定义的变量。这对我来说很容易，因为我将这个对象用于多种目的。

data 是我从端点加载的变量。当我提交表单时，我使用表单值填充数据并像这样发送该对象。

Object.keys(this.data).forEach(prop=>{
      fd.append(prop, this.form[prop]);
    })   

但我怀疑这不是操作表单的最佳方式。

有没有更干净的方法来避免重复代码？

Answer 1

我通常创建一个接受 formBuilder 作为独立 util 函数的函数，并从组件内部传递它