如何将FormGroup对象绑定到ModelClass对象

Question

按钮点击我必须发布并发送学生对象，  所以请告诉我如何将formGroup对象绑定到ModelClass对象，  不想手动将数据逐个添加到变量中。  我必须不用手动绑定。

这是我的formGroup对象

this.AMform = fb.group({ 

            "Name": new FormControl("", [Validators.required, Validators.maxLength(10) ]),
            "Code":new FormControl("", [Validators.required, Validators.maxLength(10) ]),
            "Address": new FormControl("", [Validators.required, Validators.maxLength(10) ])

        });

这是我的模特

class Student 
{        
    public Name: string="";
    public Code: string="";
    public Äddress: string="";

} 

Answer 1

点击按钮，您可以执行以下操作：

onClick(){
  let student = new Student();
  student = this.AMform.value;
}

Answer 2

您单击：

manterDados() {
    console.log(this.inquilinoForm.value);
    this.inquilino = this.inquilinoForm.value;
    console.log(this.inquilino);
  }

Answer 3

当前评分最高的答案创建一个对象，将其分配给一个变量，然后在下一行将另一个对象分配给该变量，从而导致之前创建的对象被垃圾回收。这没有多大意义。

将 FormGroup 的值分配给类实例的问题在于 AbstractFormGroup.value 的类型为 any。这意味着，您的编译器不会抱怨任何类型不匹配，而这正是评分最高的答案中的代码实际编译的原因。

让我展示三种不同的方法，一种可以处理这个问题：

又快又脏

只需将 value 的 FormGroup 强制转换为所需的类：

onClick() {
  let student: Student = this.AMform.value as Student;
}

不要忘记这将是运行时的 Javascript 并且 Javascript 不是类型安全的，并且不会关心 value 对象的属性是否与您的 Student 类的字段匹配。

如果您可以确定 FormControls 的 FormGroup 将始终与 Student 类的字段匹配，请使用此方法。

使用Object.assign

注意：这仅在对象初始化时初始化所有类字段时才有效！

另一种选择是使用 Object.assign。这样做的好处是，属于 Student 类但不存在于 value 对象中的属性将存在于最终对象中。但是，如果 AMfom.value 包含不属于您的 Student 类的其他属性，它们仍将最终出现在最终对象中。

onClick() {
  let student: Student = Object.assign(new Student(), this.AMform.value);
}

// e.g. for {Name: 'Foo', Code: 'Bar'}, we will get {Name: 'Foo', Code: 'Bar', Address: ''}
// BUT for {Name: 'Foo', Age: 25}, we will get {Name: 'Foo', Code: '', Address: '', Age: 25}

手动铸造

注意：这仅在对象初始化时初始化所有类字段时才有效！

Object.assign() 的缺点是它会将任何属性分配给对象，即使该属性不是对象类的字段。为了解决这个问题，您可以编写自己的转换函数。此函数仅在两个对象中都存在属性时才分配属性。

function castAny<T>(target: T, source: object): T {
  const result: T = Object.assign({}, target);
  Object.keys(target).forEach(key => {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      result[key] = source[key];
    }
  });
  return result;
}

onClick() {
  let student: Student = castAny(new Student(), this.AMform.value);
}

// for {Name: 'Foo', Age: 25}, we will get {Name: 'Foo', Code: '', Address: ''}