title: Placeholder not displayed when using ng-select with formControlName
body: <p>When I put formControlName in my div, placeholder not displayed, but, when I put it out, placeholder displayed.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div class="form-group" [ngClass]="applyCssError('dropdown')"&gt;
     &lt;select (change)="selectedChange($event)" formControlName="dropdown" class="custom-select form-control" id="dropdown"&gt;
      &lt;option class="dropdown-placeholder" value="&amp;quot;PLACEHOLDER_1427118222253&amp;quot;" style="color: rgb(51, 51, 51); display: none;"&gt;Select a Challenge&lt;/option&gt;
      &lt;option value="1"&gt;Copenhagen - 2018&lt;/option&gt;
      &lt;option value="2"&gt;Paris - 2018&lt;/option&gt;
    &lt;/select&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;app-field-control-error
              [showError]="verifyValidTouched('dropdown')"
              msgError="Dropdown Required"&gt;
              &lt;/app-field-control-error&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>if I withdraw the formControlName, the placeholder working</p>
  
  <p><strong>TYPESCRIPT:</strong></p>
  
  <pre><code>import { Http } from '@angular/http';
  import { FormGroup, FormBuilder, Validators, FormControl } from 
  '@angular/forms';
  import { Component, OnInit } from '@angular/core';
  import 'rxjs/add/operator/map';
  import { IMyDpOptions } from 'mydatepicker';
  import { SelectItem } from 'primeng/api';
  
  @component({
  selector: 'app-form-challenge',
  templateUrl: './form-challenge.component.html',
  styleUrls: ['./form-challenge.component.css']
  })
  export class FormChallengeComponent implements OnInit {
  
  private selectUndefinedOptionValue: any;
  
  public myDatePickerOptions: IMyDpOptions = {
  dateFormat: 'mm.dd.yyyy'
  };
  
  selectedChallenge: '';
  
  form: FormGroup;
  
  constructor(
  private formBuilder: FormBuilder,
  private http: Http,
  ) { }
  
  ngOnInit() {
  this.form = this.formBuilder.group({
  dropdown: [null, Validators.required],
  name: [null, [Validators.required, Validators.minLength(3),             
  Validators.maxLength(30)]],
  phone: [null, Validators.required],
  email: [null, [Validators.required, Validators.email]],
  company: [null, Validators.required],
  dateincorporation: [null, Validators.required],
  companyAddress: [null, Validators.required],
  vat: null,
  mensage: [null, Validators.required],
  website: [null, Validators.required],
  video: null
  });
  }
  
  onSubmit() {
  console.log(this.form.value);
  
  if (this.form.valid) {
  
  this.http.post('https://httpbin.org/post', JSON.stringify(this.form.value))
  .map(res =&gt; res)
  .subscribe(dados =&gt; {
  console.log(dados);
  this.form.reset();
  }); 
  } else {
  console.log('formulario invalido');
  Object.keys(this.form.controls).forEach(field =&gt; {
  console.log(field);
  const control = this.form.get(field);
  control.markAsDirty();
  });
  }
  }
  
  verifyValidTouched(field) {
  return !this.form.get(field).valid &amp;&amp; (this.form.get(field).touched ||             
  this.form.get(field).dirty);
  }
  
  applyCssError(field) {
  return {
  'has-error': this.verifyValidTouched(field),
  'has-feedback': this.verifyValidTouched(field)
  };
  }
  
  setDate(): void {
  const date = new Date();
  this.form.patchValue({dateincorporation: {
  date: {
  year: date.getFullYear(),
  month: date.getMonth() + 1,
  day: date.getDate()
  }
  }});
  }
  
  clearDate(): void {
  this.form.patchValue({myDate: null});
  }
  
  selectedChange(event: any) {
  this.selectedChallenge = event.target.value;
  console.log(this.selectedChallenge);
  }
  
  }
  </code></pre>
  
  <p>I need use the formControlName because that's where are all my validations.
  I've tried in several ways to make this select work, but nothing is right </p>
  
  <p>Thanks for help</p>