使用带有formControlName的ng-select时，不显示占位符

Question

当我在我的div中放置formControlName时，占位符没有显示，但是，当我把它放出来时，显示占位符。

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>

如果我撤回formControlName，占位符工作

打字稿：

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，因为这是我所有的验证。我已经尝试过几种方式来完成这项选择工作，但没有什么是正确的

感谢帮助

Answer 1

从下面选项中删除显示无。

<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>

谢谢 ！！

Answer 2

你有一些问题：

1. 您忘记将FormGroup放入代码中，formControlName必须与父formGroup指令一起使用
2. 设置'-1'instated value =“”PLACEHOLDER_1427118222253“”=> value =“ - 1”
3. 最后在.ts instated'null'=>下拉列表中设置'-1'：[“ - 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>

并更改.ts如下代码：

   this.form = this.formBuilder.group({
  dropdown: ["-1", 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
});