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
Post a Comment