Placeholder not displayed when using ng-select with formControlName

user_9630955 0
Viewed 6072

When I put formControlName in my div, placeholder not displayed, but, when I put it out, placeholder displayed.

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>

if I withdraw the formControlName, the placeholder working

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);
}

}

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

Thanks for help

angular typescript html-select validation
3 Answers

My issue fixed when i used null instead of "" in form builder

Use this

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

instead of

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

Remove Display none from below option. 

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

Thanks !!

user_77591060

you have some problem:

  1. you forgot to put FormGroup in your code, formControlName must be used with a parent formGroup directive

  2. set '-1' instated value=""PLACEHOLDER_1427118222253"" =>value="-1"

  3. finally set '-1' in .ts instated 'null' => dropdown: ["-1", Validators.required]

please change your code like this:

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

and change .ts Like the following codes:

   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
});
user_62441340
Related