How to bind FormGroup object to ModelClass object

Question

On Button click i have to post and send student object, so pls tell me how to bind formGroup object to ModelClass Object, dont want to add manually data one by one to variable. I have to bind with single way not manually.

This is my formGroup Object

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) ])

        });

This is my model

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

} 

Answer 1

On button click you can do following :

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

Answer 2

The currently highest-rated answer creates an object, assigns it to a variable, and assigns another object to that variable in the next line, causing the previously created object to be garbage collected. This doesn't make a lot of sense.

The problem with assigning a FormGroup's value to a class instance is that AbstractFormGroup.value has type any. This means, your compiler won't complain about any type mismatch which is the reason the code in the highest-rated answer actually compiles.

Let me show three different ways, one can deal with this issue:

Quick and dirty

Simply cast the value of the FormGroup to the desired class:

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

Don't forget that this will be Javascript at runtime and Javascript is not typesafe and will not care if the properties of the value object match the fields of your Student class.

If you can be sure that the FormControls of your FormGroup will always match the fields of your Student class, use this approach.

With Object.assign

Another option would be to use Object.assign. This has the benefit that properties that are part of your Student class but are not present in the value object will be present in the final object. However, if AMfom.value contains additional properties that are not part of your Student class, they will still end up in the final object.

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}

Note: This will only work if all class fields are initialized on object initialization.

Casting manually

The drawback with Object.assign() is that it will assign any properties to an object even if this property is not a field of the object's class. To deal with this issue, you can write your own casting function. This function assigns properties only if they are present in both objects.

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: ''}

Note: This will only work if all class fields are initialized on object initialization.

Answer 3

Do you click:

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

Answer 4

this is and other solucion

obj = JSON.parse(JSON.stringify(this.formGroup.value))

if all controls of formGroup have the same name of the obj