Angular 2 : Creating object in interface

Question

I am trying to create nested object as below

myForm value: 
{
  "name": {
         "firstname":"abc",
         "lastname":"xyz"
   },
  "address": {
    "street": "assdasdasdsa",
    "postcode": "8000"
  }
}

In interface, there is option to specify string,number, array types syntax

I tried below options but no luck and it is throwing error "ERROR Error: Cannot find control with name:" (workarounds from SO and others didn't help)

export interface Customer {
    name: {
    firstname: string;
    lastname: string;
};
    addresses: Address[];
}

export interface Address {
    street: string;
    postcode: string;
}

Could you please provide me options to specify object as mentioned above?

Plunker- https://embed.plnkr.co/hQ6RtzCfPosfQl4HlbZQ/

In Angular 1, it was easy with scope object and using ng-model as "myForm.name.firstname"

Codepen tried in angular1 - https://codepen.io/nagasai/pen/mmYgbr and trying to replicate same in angular 2

yes ,Plunker url is working fine with name as string and I am trying to change it as object which is not working — Naga Sai A
– Naga Sai A, Commented May 29, 2017 at 10:42
well make a new interface for Name: export interface Name {firstname: string; lastname:string} address: export interface Address {street: string;postcode: string;} and customer: export interface Customer{name: Name;addresses:Address[]} — AVJT82
– AVJT82, Commented May 29, 2017 at 10:44
app.component.html:7 ERROR Error: Cannot find control with name: 'firstname' , getting same error after trying with above option — Naga Sai A
– Naga Sai A, Commented May 29, 2017 at 10:57

AVJT82 · Accepted Answer · 2017-05-29 11:09:50Z

2

You have a form group name in your TS, which contains the form controls firstname and lastname. You had forgotten to apply that in your template. So you need to wrap the form controls with formGroupName:

<div formGroupName="name"> <!-- Here -->
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" formControlName="firstname">
    <input type="text" class="form-control" formControlName="lastname">
 </div>

Forked Plunker

answered May 29, 2017 at 11:09

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

3 Comments

Naga Sai A Over a year ago

Thanks AJT, it works great.... :) not sure about downvote :) for this question :(

AVJT82 Over a year ago

Glad to hear it worked out! Well you got an upvote from me ;P Have a nice day/evening/night and happy coding! :)

Naga Sai A Over a year ago

Thanks a lot AJT :)

Collectives™ on Stack Overflow

Angular 2 : Creating object in interface

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related