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，则占位符正常工作

TYPESCRIPT：

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

您遇到了一些问题：

您忘记将FormGroup放入代码中，formControlName必须与父级一起使用 formGroup指令
将'-1'设置为值=“ =” PLACEHOLDER_1427118222253“” =>值=“-1”
最终在.ts设置为'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
});

Answer 3

当我在表单构建器中使用 null 而不是 "" 时我的问题得到解决

使用这个

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

代替

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

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

3 个答案: