klp klp - 3 months ago 16
TypeScript Question

Empty form is not getting displayed when details are empty

Here, i am trying to display the form with some detail called custominfo,two cases are important here
case-1:When custom info is present in database display form with details.
case-2:When there is no custom info details in database display empty form.
Here i am getting case-1 but i failed to get case-2,the form is not getting displayed,I really tried a lot for this but no use,can someone please help me with the solution.
My service.ts,

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { IDetails } from './details';

@Injectable()
export class GetCustInfo {

str = localStorage.getItem('social');
loc = JSON.parse(this.str);
id = this.loc.profile_id;
private _productUrl = 'http://localhost/a2server/index.php/profile/editcustominfo/'+this.id;

constructor(private _http: Http) { }

getCustList(): Observable<IDetails[]> {
return this._http.get(this._productUrl)
.map((response: Response) => { return <IDetails[]> response.json().data[0];
});

}
}


My main.ts(where i am subscribing to my above service),

export class Custom {
message:string = "Custom Info Updated";
hide:any = false;
http: Http;
details:any;
form: FormGroup;

constructor(fbld: FormBuilder,http: Http,private _service:GetCustInfo,public toastr: ToastsManager) {
this.http = http;
this._service.getCustList()
.subscribe(details => this.details = details,

err => this.details = {});


my template,

<div class="col-sm-12 nopadding custominfo contenttoppadding">
<form class="nobottommargin" *ngFor="details" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" name="template-contactform" action="include/sendemail.php" method="post" novalidate="novalidate">
<div class="form-group">

<div class="input-group divcenter">
<span class="input-group-addon noradius inputgroupaddon"><i class="icon-facebook"></i></span>
<input type="email" type="email" tooltip="Custom url" [tooltipDisabled]="false" [tooltipAnimation]="true"
tooltipPlacement="top" name="widget-subscribe-form-email" [formControl]="form.controls['custominfo']" [(ngModel)]="details.custominfo" class="form-control required email formcontrolheight" placeholder="Facebook" aria-required="true" />
</div>
</div>
</form>
</div>


interface.ts,

export interface IDetails{

custominfo:string;
}


Here i am trying to display results even when values are empty but i am not able to see the form when details are empty.

Answer

Do you want to show one form? or multiple forms? You are using *ngFor ?! And your variable details is an array, but your getCustList() function returns just the first element?

Anyway.. add error handling to your getCustList() subscribtion:

this._service.getCustList()
            .subscribe(details => this.details = details,
                       err => {
                                 this.details = [{}]; /* put your empty/default model here */
                                 console.log(err);
                              }
                       );
Comments