javascript - Adding input field Angular -

i tried make function add input field using typescript in angular. @ screen.

i getting correct field view in json not in actual screen. don't know how change it. tried many solutions didn't got succeed.

app.component.html

<div class="container">   <div class="row">     <div class="col-xs-12">       <div class="margin-20">         <h4>add customer</h4>       </div>       <form [formgroup]="myform" novalidate (ngsubmit)="save(myform)">         <div class="form-group">           <label>name</label>           <input type="text" class="form-control" formcontrolname="name">           <small *ngif="!myform.controls.name.valid" class="text-danger">             name required (minimum 5 characters).           </small>         </div>         <!--addresses-->         <div formarrayname="addresses">           <div *ngfor="let address of myform.controls.addresses.controls; let i=index" class="panel panel-default">             <div class="panel-heading">               <span>address {{i + 1}}</span>               <span class="glyphicon glyphicon-remove pull-right" *ngif="myform.controls.addresses.controls.length > 1" (click)="removeaddress(i)"></span>             </div>             <div class="panel-body" [formgroupname]="i">               <div class="form-group col-xs-6">                 <label>street</label>                 <input type="text" class="form-control" formcontrolname="street">                 <small [hidden]="myform.controls.addresses.controls[i].controls.street.valid" class="text-danger">                   street required                 </small>               </div>               <div class="form-group col-xs-6">                 <label>postcode</label>                 <input type="text" class="form-control" formcontrolname="postcode">               </div>               <div *ngfor="let answer of myform.controls.answers.controls; let      i=index" class="panel panel-default">                 <div class="form-group col-xs-6">                   <label>answer</label>                   <input type="text" class="form-control"       formcontrolname="answer">                 </div>               </div>                <div class="margin-20">                 <a (click)="addanswers()" style="cursor: default">                   add answer +                 </a>               </div>              </div>           </div>         </div>          <div class="margin-20">           <a (click)="addaddress()" style="cursor: default">             add address +           </a>         </div>          <div class="margin-20">           <a (click)="inita()" style="cursor: default">             add address +           </a>         </div>             <div class="margin-20">           <button type="submit" class="btn btn-primary pull-right"       [disabled]="!myform.valid">submit</button>         </div>         <div class="clearfix"></div>          <div class="margin-20">           <div>myform details:-</div>           <pre>is myform valid?: <br>{{myform.valid | json}}</pre>           <pre>form value: <br>{{myform.value | json}}</pre>         </div>       </form>     </div>   </div>   </div> 

app.component.ts

import { component, oninit } '@angular/core'; import { formgroup, formarray,  formbuilder, validators } '@angular/forms'; import { customer } './customer.interface';  @component({   moduleid: module.id,   selector: 'my-app',   templateurl: 'app.component.html', }) export class appcomponent implements oninit {     public myform: formgroup;      constructor(private _fb: formbuilder) { }      ngoninit() {         this.myform = this._fb.group({             name: ['', [validators.required, validators.minlength(5)]],             addresses: this._fb.array([                 this.initaddress(),             ]),           answers: this._fb.array([             this.initanswers(),           ])         });     }     inita() {     this.myform = this._fb.group({       name: ['', [validators.required, validators.minlength(5)]],       addresses: this._fb.array([         this.initaddress(),       ]),       answers: this._fb.array([         this.initanswers(),       ])     });   }       initaddress() {         return this._fb.group({             street: ['', validators.required],             postcode: [''],             answer: ['']         });     }      addaddress() {         const control = <formarray>this.myform.controls['addresses'];         control.push(this.initaddress());     }      removeaddress(i: number) {         const control = <formarray>this.myform.controls['addresses'];         control.removeat(i);     }    initanswers() {     return this._fb.group({       answer: ['']     });   }       addanswers() {     const control = <formarray>this.myform.controls['answers'];     control.push(this.initanswers());   }    removeanswers(i: number) {     const control = <formarray>this.myform.controls['answers'];     control.removeat(i);   }      save(model: customer) {         // call api save         // ...         console.log(model);     } }