Form is not getting displayed when the values are empty

Question

My template is not displaying when my details is empty but it is getting displayed when the details has values.I have been structed here and not able to find solution.Can someone please help me.......... My 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 to your facebook account and click on your profile, copy and paste url from there" [tooltipDisabled]="false" [tooltipAnimation]="true"
                    tooltipPlacement="top"><i class="icon-question-sign"></i> What is my 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];}

        });

}

}

Günter Zöchbauer · Accepted Answer · 2016-08-24 05:19:29Z

1

I assume Angular2 throws an exception because of

[(ngModel)]="details.facebook"

.facebook can't be accessed when details is null

If you change

[(ngModel)]="details.facebook"

to

[ngModel]="details?.facebook" (ngModelChange)="details.facebook = $event"

or

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

then it should work as expected.

answered Aug 24, 2016 at 5:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

14 Comments

MMR Over a year ago

Gunter,still my form is not displayed and will i need to make details = [ ] in my form?

Günter Zöchbauer Over a year ago

Do you get an error in the console? If details is an array, then details.facebook doesn't seem valid. It would be details.[0].facebook or something like that.

MMR Over a year ago

This is my server o/p {error_code: 1, message: "fail", data: []} data : [] error_code : 1 message : "fail"

Günter Zöchbauer Over a year ago

What about the array access problem? Why do you access an array like an object?

MMR Over a year ago

i cahnged my html like this [ngModel]="details[0].facebook" but still it says the following error Cannot read property 'facebook' of undefined

|

Collectives™ on Stack Overflow

Form is not getting displayed when the values are empty

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related