Question

我正在寻找在FormGroup中实现计算字段。使用标准POJO，我可以添加一个访问器或函数来执行逻辑。我正在寻找一种优雅的方法来为FormGroup添加等效的功能。

这些字段具有繁重的业务逻辑，并且需要将计算值发送到服务器。（无法将计算逻辑推入我的模板）

这是我的示例模型，我的计算字段为访问者：

people = [
    {
        firstName: 'Bob',
        lastName: 'Ross',
        get fullName() {
            return `${this.firstName} ${this.lastName}`;
        },
        carsOwned: [
            {
                make: 'Toyota',
                model: 'Camry',
                year: '2010',
                get makeModelYear() {
                    return `${this.year} ${this.make} ${this.model}`;
                }
            }
        ]
    }
];

这里它被绑定在我的模板中：

<div *ngFor="let person of people">
  {{person.fullName}} drives:
  <span *ngFor="let car of person.carsOwned;let i = index">
    {{car.makeModelYear + (i < person.carsOwned.length - 1 ? ', ' : ' ')}}
  </span>
</div>

这是我的模型映射到FormGroup：

let peopleFormGroup = this.formBuilder.group({
    people: this.formBuilder.array(
            this.people.map((person: Person) => {
                return this.formBuilder.group({
                    firstName: [person.firstName],
                    lastName: [person.lastName],
                    // fullName: null   // ???
                    carsOwned: this.formBuilder.array(person.carsOwned.map((car: Car) => {
                        return {
                            make: [car.make],
                            model: [car.model],
                            year: [car.year],
                            // makeModelYear: null   // ???
                        }
                    }))
                });
            })
    )
});

将计算字段添加到生成的FormGroup中最优雅，最灵活的方法是什么？

目前，我正在订阅计算“输入”valueChanges并使用FormControl输出到setValue()。从规模来看，它变得混乱而难以维护。此外，setValue()的错误将导致无限循环。我正在寻找更好的解决方案。我不一定需要我的计算字段为FormControl，因为用户无论如何都不能修改它们。谢谢！

FormGroup计算字段

0 个答案: