Reactive Forms correctly convert Form Value to Model Object

Question

While creating a Model Driven Template Reactive forms, when I create model object from Form Value. Then model object is loosing its TYPE.

For a Simple Example:

Model Class Book:

export class Book {
  public name: string;
  public isbn: string;
}

Component:

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {

  bookFormGroup: FormGroup;
  private newBook: Book = new Book();

  constructor(private fb: FormBuilder) {
    this.bookFormGroup = this.fb.group({
      name: new FormControl(''),
      isbn: new FormControl('')
    });
  }

  ngOnInit() {
  }

  addBook() {
    console.log('submit');
    this.newBook = <Book> this.bookFormGroup.value;
    console.log(this.newBook instanceof Book);
    console.log(this.newBook);
  }

}

HTML:

<form [formGroup]="bookFormGroup" (ngSubmit)="addBook()">
    <input type="text" formControlName="name" >
    <input type="text" formControlName="isbn" >

    <input type="submit" value="Submit">
</form>

In the above example, after filling newBook instance its converted to normal Object

i.e, After this.newBook = <Book> this.bookFormGroup.value;

this.newBook instanceof Book is becoming FALSE

How do I prevent this? Or is there any better way to achieve this?

Note: I tried with JSON.parse() but it still same.

https://stackoverflow.com/questions/22885995/how-do-i-initialize-a-typescript-object-with-a-json-object https://stackoverflow.com/questions/13204759/typescript-or-javascript-type-casting — yurzui, Apr 24 '18 at 09:19

score 97 · Accepted Answer · edited Mar 11 '21 at 11:57

97

This constructor will work with any type and will assign any matching filed.

export class Book {
  public constructor(init?: Partial<Book>) {
        Object.assign(this, init);
    }
}

So you will be able to do this:

this.newBook = new Book(this.bookFormGroup.value);

This will save you a lot of work if the Book class will have any change in future and became bigger.

edited Mar 11 '21 at 11:57

Kishor Prakash

8,011
12
61
92

answered Apr 24 '18 at 09:38

Toshkata Tonev

1,431
11
12

Hey thanks for answer,How do i make it work when my Book class extends another Class?? – Kishor Prakash Apr 24 '18 at 10:02
2

Just call empty super() in the constructor. The parent fields will apply as well. – Toshkata Tonev Apr 24 '18 at 10:24
Love this! Exactly what I need - thank you so much! – King Arthur the Third Mar 04 '20 at 20:46
Don't forget that you must also parse child properties into their correct instance/type too (if that is what you want). – Ross Brasseaux Apr 11 '22 at 01:20

score 18 · Answer 2 · answered Aug 25 '19 at 19:43

18

I use spread operator:

this.newBook = {...this.newBook,...this.bookFormGroup.value}

answered Aug 25 '19 at 19:43

Husam Zidan

619
6
18

Work only with attributs not with the function of the class – Hawklm CG Apr 07 '21 at 14:23
3

The form value which you will post to the server should not contain functions. @HawklmCG – Husam Zidan Apr 08 '21 at 08:00
I have several child components that all make up the model interface that I want to post to backend. Using this method, I could merge several forms that partially and sort of consecutively make up the model interface that I want to post. ```this.newBook = {...this.newBook, ...this.childForm1.bookFormGroup.value}; this.newBook = {...this.newBook, ...this.childForm2.someForm.value};``` where I have @ViewChild for my childForms. – Arizon Aug 18 '23 at 06:29

score 8 · Answer 3 · answered Nov 10 '19 at 07:38

Let's say your model is like this:

export class Content {
    ID: number;
    Title: string;
    Summary: string;
}

Your component will look like this:

export class ContentComponent implements OnInit {


  content: Content;
  contentForm: FormGroup;

  ngOnInit() {


    this.contentForm = this.formBuilder.group({
      Title: ['', Validators.required],
      Summary: ['', Validators.required]
    });.....

When the save button is called, you can merge the form builder object and the dto you have:

onContentFormSubmit() {

// stop here if form is invalid
if (this.contentForm.invalid) {
  return;
}

this.content = Object.assign(this.content, this.contentForm.value);

}

this.content will have the predefined values you have from onInit and the values from the from group.

This is helpful! Thanks so much!! +1 – Mr. Dang Feb 08 '20 at 05:06 — Mr. Dang, Feb 08 '20 at 05:06

score 6 · Answer 4 · answered Apr 24 '18 at 09:34

6

You should have an interface and a class, and the class should implement the interface.

Create an empty book with an empty constructor.

export class Book implements IBook {
  constructor(public name = '', public isbn = '') {}
}

Create a real model-driven form.

this.bookFormGroup = this.fb.group(new Book());

Correctly type your form

this.newBook: IBook = this.bookFormGroup.value;

answered Apr 24 '18 at 09:34

2

How do you add validation to bookFormGroup when we passed it a new Book() ? – Thibs Jun 28 '18 at 14:55
I never faced the case, but there's an [official documentation](https://angular.io/guide/dynamic-form#question-form-components) that might help you. If I had to do it, I would create a class method that accepts a form group as a parameter, and thus can set the validators. – Jun 28 '18 at 14:59

score 5 · Answer 5 · answered Feb 16 '21 at 04:41

5

let formData = this.formGroup.value as DataModel;

answered Feb 16 '21 at 04:41

katesky8

572
6
9

this is simple and good one – MindRoasterMir Jun 03 '22 at 11:05

score 4 · Answer 6 · answered Apr 24 '18 at 09:33

4

you can try this in your addBook():

 let formData = Object.assign({});
 formData = Object.assign(formData, this.bookFormGroup.value);
 this.newBook = new Book(formData.name ,formData.isbn );
 console.log(this.newBook instanceof Book);

answered Apr 24 '18 at 09:33

Fateme Fazli

11,582
2
31
48

score 3 · Answer 7 · answered Apr 24 '18 at 09:19

Change your class definition to

export class Book {
  constructor(public name: string, public isbn: string) {}
}

Change your addBook method to

addBook() {
  const { name, isbn } = this.bookFormGroup.value;
  this.newBook = new Book(name, isbn);
  console.log(this.newBook instanceof Book);
  console.log(this.newBook);
}

score 2 · Answer 8 · answered Feb 09 '23 at 22:25

I created a helper class with a static method like this:

export class ObjectAssigner {
  static create<T>(init: Partial<T>): T {
    const value = {};
    Object.assign(value, init);
    return value as T;
  }

With this way I can use it for both classes and interfaces like this:

const bookModel= ObjectAssigner.create<Book>(this.bookFormGroup.value);

score 1 · Answer 9 · answered Sep 18 '20 at 16:34

I have used 'Partical class' to inject value through constractor of class. this can be used when your form calls api and model needed to be passed in without casting or when you create new instance of model from reactive form value.

export class Address  {
  postCode: string;
  line1: string;
  line2: string;
  county: string;
  city: string;
  country: string;
  cityId: string;
  countryId: string;

  constructor(initialValues: Partial<Address> = {}) {
    if (initialValues) {
      for (const key in initialValues) {
        if (initialValues.hasOwnProperty(key)) {
           this[key] = initialValues[key];
        }
      }
    }
  }
}

score 0 · Answer 10 · answered Jan 15 '19 at 06:04

0

I had this problem and create the formGroup directly to model, solved the problem. In your code:

  this.bookFormGroup = this.fb.group(Book);

Book is the class name of your model.

answered Jan 15 '19 at 06:04

user1012506

2,048
1
26
45

1

How do you handle FormGroup validations (i.e. front-end exposed properties of the book) ? – Jviaches Nov 02 '19 at 13:09

score 0 · Answer 11 · answered Mar 10 '21 at 15:43

0

I use:

this.formGroupSubscription = this.formGroup.valueChanges.subscribe(form => {
    let mappedObject: MyCreateDTO = form;

    // do stuff with mappedObject.myproperty
});

answered Mar 10 '21 at 15:43

Astrophage

1,231
1
12
38

Reactive Forms correctly convert Form Value to Model Object

11 Answers11

Linked