Question

我在Angular 2中学习反应形式，我想知道是否可以一次绑定所有对象属性。我看到的每个指南都显示了类似的内容：

curl -v google.co.uk

然后设置如下值：

this.form = this.fb.group({
    name: ['', Validators.required],
    event: this.fb.group({
        title: ['', Validators.required],
        location: ['', Validators.required]
    })
});

对我来说，这在实际情况下并不可行，因为你经常需要绑定很多属性并定义它们并不是很方便。如果模型发生变化，您需要在两个位置更新它。

所以我尝试了这个：

this.form.setValue({
    name: object.name,
    event: object.event
});

但我收到了这个错误：

错误：此组尚未注册表单控件。如果你正在使用ngModel，你可能想检查下一个刻度（例如使用setTimeout）

如果我使用this.refundRecordForm = this.fb.group(new RefundRecord()); this.refundRecordForm.setValue(this.refundRecord);代替patchValue，则不会出现错误，但表单中不包含任何控件。

我尝试手动绑定几个字段并且它有效，所以我的猜测是你不能一次绑定整个对象。

所以我想知道它是否可行。我对此非常陌生，所以也许我错过了一些明显的东西。

您怎么看？

Answer 1

这行代码：

this.refundRecordForm = this.fb.group(new RefundRecord());

除非将RefundRecord定义为一组FormControls，否则无效。

要使活动表单起作用，您需要创建表单组和关联的FormControls。这就是你得到的错误信息的含义

您可以尝试创建表单：

this.form = this.fb.group({
    name: ['', Validators.required],
    event: this.fb.group({
        title: ['', Validators.required],
        location: ['', Validators.required]
    })
});

然后尝试使用快捷语法分配值：

this.form.setValue(this.refundRecord);  // or .patchValue

我不知道这是否有用，我没有尝试过，所以让我们知道你是怎么做的。或者你可以建立一个plunker，我们可以尝试一下。

您还可以看一下：https://angular.io/guide/dynamic-form其中显示了如何构建动态表单。

Answer 2

您需要在此处创建一个函数，该函数将返回您自定义类型的FormGroup。其他一切都可以保持不变。

例如，改变这个：

this.refundRecordForm = this.fb.group(new RefundRecord());
this.refundRecordForm.setValue(this.refundRecord);

对此：

initRefundRecord(record: RefundRecord = new RefundRecord()): FormGroup {
    return this.fb.group({
        name: [record.name, Validators.required],
        event: this.fb.group({
            title: [record.event.title, Validators.required],
            location: [record.event.location, Validators.required]
        })
    });
}

// Set to new empty form group of refund record type
this.refundRecordForm = this.initRefundRecord();

// Update the value later
this.refundRecordForm.patchValue(this.refundRecord);

使用这种方法，如果您想要创建具有预先存在的值的表单，您可以简单地执行以下操作：

// Set to new prefilled form group of refund record type
this.refundRecordForm = this.initRefundRecord(preexistingRecord);

// Update the value later
this.refundRecordForm.patchValue(this.refundRecord);

一切都是一样的。现在，当您想要添加更多字段等时，您只需要修改在initRefundRecord内创建的表单组。

Angular 2 Reactive Froms - 立即绑定整个对象

2 个答案: