Angular 将ng select与formControlName一起使用时不显示占位符

当我将formControlName放入div时，占位符不显示，但当我将其取出时，占位符显示

HTML:

    <div class="form-group" [ngClass]="applyCssError('dropdown')">
   <select (change)="selectedChange($event)" formControlName="dropdown" class="custom-select form-control" id="dropdown">
    <option class="dropdown-placeholder" value="&quot;PLACEHOLDER_1427118222253&quot;" style="color: rgb(51, 51, 51); display: none;">Select a Challenge</option>
    <option value="1">Copenhagen - 2018</option>
    <option value="2">Paris - 2018</option>
  </select>
        <div class="col-sm-12">
            <app-field-control-error
            [showError]="verifyValidTouched('dropdown')"
            msgError="Dropdown Required">
            </app-field-control-error>
        </div>
  </div>

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 => res)
.subscribe(dados => {
console.log(dados);
this.form.reset();
}); 
} else {
console.log('formulario invalido');
Object.keys(this.form.controls).forEach(field => {
console.log(field);
const control = this.form.get(field);
control.markAsDirty();
});
}
}

verifyValidTouched(field) {
return !this.form.get(field).valid && (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);
}

}

我需要使用formControlName，因为这是我所有验证的地方。 我已经尝试了几种方法来让这个选择工作，但没有什么是正确的

---

感谢您的帮助

从下面删除“无显示”选项

<select (change)="selectedChange($event)" formControlName="dropdown" class="custom-select form-control" id="dropdown">
    <option class="dropdown-placeholder" value="&quot;PLACEHOLDER_1427118222253&quot;" style="color: rgb(51, 51, 51);">Select a Challenge</option>
    <option value="1">Copenhagen - 2018</option>
    <option value="2">Paris - 2018</option>
  </select>

选择一个挑战
哥本哈根-2018
巴黎-2018

谢谢

您遇到了一些问题：

您忘记在代码中放入FormGroup，formControlName必须与父级一起使用 formGroup指令

设置'-1'已安装值=“”占位符_1427118222253”“=>value=“-1”

最后在.ts安装的'null'=>下拉列表中设置'-1'，Validators.required]

请按以下方式更改您的代码：

  <div class="form-group" [ngClass]="applyCssError('dropdown')" [formGroup]="form"> 
     <select formControlName="dropdown" class="custom-select form-control" 
      id="dropdown">
    <option class="dropdown-placeholder" value="-1" style="color: rgb(51, 51, 51); 
    display: none;">Select a Challenge</option>
   <option  value="1">Copenhagen - 2018</option>
   <option  value="2">Paris - 2018</option>
  </select>
 </div>

---

当我在form builder中使用null而不是“”时，我的问题已得到修复

用这个

   this.form = this.formBuilder.group({
   name: [null, [Validators.required, Validators.minLength(3)]]
   });

而不是

this.form = this.formBuilder.group({
   name: ["", [Validators.required, Validators.minLength(3)]]
   });

---

您已设置

样式显示：无谢谢帮助@alireza，我用ng select做的很好：）谢谢帮助@Abhijeet，我用ng select做的很好：）
this.form = this.formBuilder.group({
   name: ["", [Validators.required, Validators.minLength(3)]]
   });