How to create composed object in angular2 reactive forms?

Question

I have these two following class:

export class Machine {
   name = '';
   computer = new Computer()
}

export class Computer {
   os = '';
}

then on my component using reactive form i have:

ngOnInit()  {  this.form = this.fb.group(new Machine())  }

and in my template:

 <input class="form-control" formControlName="name"> // the name works fine
 <input class="form-control" formControlName="computer.os">

and in console i get this error:

Cannot find control with name: 'computer.os'

Is it not possible to use FormBuilder.group like this?

snorkpete · Accepted Answer · 2017-04-12 19:54:23Z

1

In your case where you have the equivalent of a nested property (you have a form model with a 'computer' property with a nested 'os' property), you have to nest your form groups to achieve the same effect.

So, in your case, you'd need:

<div [formGroup]="form">
   <input formControlName="name" />
   <div formGroupName="computer">
      <input formControlName="os" />
   </div>
</div>

That structure above will give a form.value of:

 {
   name: <value of input field>
   computer: {
      os: <value of second input field>
   }
 }

I used a div for my nested form group, but you can use any element (or even ng-container if you don't want to change your DOM structure)

To be honest, I've never seen examples where people use actual classes to represent their form models (i tend to see interfaces, usually) but since the formControlName directive is basically working with property names, it probably should still work.

answered Apr 12, 2017 at 19:54

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gog Over a year ago

and using the form.get('computer').value , how do i get the value?

snorkpete Over a year ago

you should be able to use your `form.get('computer.os').value

Collectives™ on Stack Overflow

How to create composed object in angular2 reactive forms?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related