Formular wird nicht angezeigt, wenn die Bindungsdaten leer sind

Question

Ich versuche, das Formular anzuzeigen, ich hatte damit, aber wenn ich emotic Daten das Formular nicht angezeigt wird, kann jemand bitte Hilfe vorschlagen. My Template,

<form class="nobottommargin" *ngIf="details" [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> 
       <div class="input-group divcenter"> 
        <input type="email" tooltip="Enter Facebook url" [tooltipDisabled]="false" [tooltipAnimation]="true" 
        tooltipPlacement="top" name="widget-subscribe-form-email" [formControl]="form.controls['facebook']" [(ngModel)]="details.facebook" class="form-control required email formcontrolheight" placeholder="Facebook" aria-required="true"> 
       </div> 
      </div> 
</form> 

Das obige Formular nicht angezeigt wird, wenn „Details“ leer sind, hatte ich viel versucht, aber noch kein Ergebnis.

meine ts,

  export class Social { 
     message: any; 
     http: Http; 
     details: IDetails[]; 
     form: FormGroup; 

     constructor(fbld: FormBuilder, http: Http, private _service: GetAllList,public toastr: ToastsManager) { 
    this.details = [] 
    this.http = http; 
     this._service.getList() 
     .subscribe(details => this.details = details); 


    this.form = fbld.group({ 
     facebook: ['', Validators.required], 
    })} 

Answer 1

Sie haben eine Richtlinie an Details über das Formularelement zeigt ngIf *. Wenn Details leer sind, interpretiert JS dies als falsch und rendert das Formular nicht.

Answer 2

Entfernen Sie *ngIf Direktive aus Ihrem Formular und in Ihrer Komponente Set-Wert von facebook zu leeren String.