angular - Form is not getting displayed when the values are empty -


my template not displaying when details empty getting displayed when details has values.i have been structed here , not able find solution.can please me.......... html,

<div  class = "nopadding col-sm-12"> <form  class="nobottommargin"   [formgroup]="form"  (ngsubmit)="onsubmit(form.value)" name="template-contactform"> <div class="col-sm-12 nopadding socialaddress">     <div class="col-sm-12 formpaddingcss">        <h3 class = "headingfontcss">social address</h3>      </div>           <div class="col-sm-12 formpaddingcss cardbackgroundcolor">             <div class="col-sm-7 cardtopbottompadding noleftpadding">                 <div class="col-sm-12 nopadding">                    <label for="template-contactform-name" class="col-sm-5 nopadding">facebook <small>*</small></label>                    <div class="col-sm-7 nopadding text-right">                        <span  class="cardtextcolor" tooltip="log in facebook account , click on profile, copy , paste url there" [tooltipdisabled]="false" [tooltipanimation]="true"                     tooltipplacement="top"><i class="icon-question-sign"></i> address?</span>                    </div>                    </div>                    <div class="input-group divcenter">                     <span class="input-group-addon noradius inputgroupaddon"><i class="icon-facebook"></i></span>                     <input type="email" tooltip="enter facebook url" [tooltipdisabled]="false" [(ngmodel)]="details.facebook"  class="form-control required email formcontrolheight" placeholder="facebook" aria-required="true">                 </div>             </div>       </form> 

my ts,

      export class social {       message: any;       http: http;       details: idetails[];       form: formgroup;       constructor(fbld: formbuilder, http: http, private _service: getalllist,public toastr: toastsmanager) {     this.http = http;       this._service.getlist()         .subscribe(details => this.details = details);       } 

http call ts,

    getlist(): observable<idetails[]> {   //  console.log(this.id);     return this._http.get(this._producturl)         .map((response: response) => {             if(response.json().error_code ==0){             return <idetails[]>response.json().data[0];}          });  } 

}

i assume angular2 throws exception because of

[(ngmodel)]="details.facebook" 

.facebook can't accessed when details null

if change

[(ngmodel)]="details.facebook" 

to

[ngmodel]="details?.facebook" (ngmodelchange)="details.facebook = $event" 

or

<input type="email" *ngif="details" 

then should work expected.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -