angular 2 reactive forms issue -

i have question regarding angular 2 reactive forms. created below

country.ts

export class country {   countryname: string;   countrycode: number } 

and database in-memory-data.service.ts

import { inmemorydbservice } 'angular-in-memory-web-api'; import { injectable }    '@angular/core';`  @injectable() export class inmemorydataservice implements inmemorydbservice {`     createdb() {     let countries = [       {           countryname: 'saudi arabia',           countrycode: '+966'       }, {           countryname: 'bahrain',           countrycode: '+973'       }, {           countryname: 'united kingdom',           countrycode: '+44'       },{           countryname: 'united arab emirates',           countrycode: '+967'       },{           countryname: 'brazil',           countrycode: '+55'       },{           countryname: 'czech republic',           countrycode: '+420'       }     ];     return {countries};   } } 

i trying 2 things in reactive form view:

1- have default value in dropdown of country name

2- change country code input field based on selection of country name field. , below part of html did.

`

<div class="row">     <h1 id="header-1"> {{title}}</h1>     <div id="instructions">         <p>line 1 description</p>         <p>line 2 description</p>      </div> </div>  <form class=" form form-inline" [formgroup]="userform" novalidate>     <div class="row from-inline" formarrayname="users">         <div *ngfor="let user of userform.controls.users.controls; let i=index">            <div class="heading">              <span>{{i + 1}}.{{name}} </span>              <span class="glyphicon glyphicon-remove pull-right" *ngif="userform.controls.users.controls.length > 1"                (click)="removedependent(i)"></span>            </div>            <div class="body" [formgroupname]="i">              <div class="row row-form-fields">                <div class="form-group col-xs-12 col-sm-6 col-lg-4">                <label class="sr-only" for="countryname">country name</label>                <select class="form-control" id="countryname" formcontrolname="countryname" >                  <option *ngfor="let country of countries" [ngvalue]="country" >{{country.countryname}}</option>                </select>                <input type="text" class="form-control" formcontrolname="countrycode" id="countrycode"/>                <div [hidden]="userform.controls.users.controls[i].controls.countryname.valid ||                               (userform.controls.users.controls[i].controls.countryname.pristine && !submitted)" class="error-alert">                    country required                </div>              </div>                </div>           </div>         </div>       </div>       <legend></legend>     <div class="form-group">       <div class="row user-form-btns">       <div class="col-1-3">         <template ngbmodalcontainer></template>         <dependent-modal-component></dependent-modal-component>       </div>       <div class="col-1-3">         <button class="btn btn-form" (click)="adddependentform()">add dependents</button>       </div>       <div class="col-1-3">         <button type="submit" class="btn btn-form" id="btn-submit-form" (click)="onsubmit(userform.value, userform.valid)"                 [disabled]="!userform.valid">submit</button>       </div>        </div>     </div> </form> 

is myform valid?: 
{{userform.valid | json}}

form value: 
{{userform.value | json}}

`

please need fix this.

if want set default value control can when build form:

formbuilder

constructor(dataservice: inmemorydataservice, private fb: formbuilder) {     this.name = 'angular2';     this.countries = dataservice.createdb().countries;     this.userform = new formgroup({                        users: new formarray([])                     });      let fg1 = new formgroup({       countryname: new formcontrol(this.countries[0].countryname),       countrycode: new formcontrol(this.countries[0].countrycode)     }); 

then subscribe changes on countryname control update countrycode:

    fg1.controls.countryname.valuechanges.subscribe((countryname) => {         fg1.controls.countrycode.setvalue(this.findcountrycodebycountryname(countryname));     }); } 

adding new user:

adddependent() {     let newgroup = new formgroup({           countryname: new formcontrol(this.countries[0].countryname),           countrycode: new formcontrol(this.countries[0].countrycode)         });      newgroup.controls.countryname.valuechanges.subscribe((countryname) => {       newgroup.controls.countrycode.setvalue(this.findcountrycodebycountryname(countryname));     });      this.userform.controls.users.push(newgroup);   } 

the html bindings follow on per group basis:

<div class="body" [formgroupname]="i">              <div class="row row-form-fields">                <div class="form-group col-xs-12 col-sm-6 col-lg-4">                  <label class="sr-only" for="countryname">country name</label>                  <select class="form-control" id="countryname" formcontrolname="countryname">                    <option *ngfor="let country of countries" [ngvalue]="country.countryname">{{country.countryname}}</option>                  </select>                  <input type="text" class="form-control" formcontrolname="countrycode" id="countrycode"/>                  <div [hidden]="userform.controls.users.controls[i].valid ||                                 (userform.controls.users.controls[i].pristine && !submitted)" class="error-alert">                      country required                      </div>                  </div>                </div>             </div> 

using countryname binding instead of binding entry country selected adds overhead have lookup every time value changes instead of piggybacking off of have stored, that's wanted.

here's plunker: http://plnkr.co/edit/t7qctcpkb1g7h0gbkysu?p=preview