ng-select: Placeholder not displayed when using ng-select with formGroupName (when the form is loaded)

Expected behaviour

The placeholder should be dispalyed when the form is loaded

Actual behaviour

The input field is blanc (empty)

<form [formGroup]="form.group">
          <div class="form-group" formGroupName="adress">
            <label class="font-weight-bold"> Street</label>
            <ng-select placeholder="Select street" [items]="streets" formControlName="street"
              required bindLabel="label" bindValue="code">
            </ng-select>
          </div>
</form>

More Info

ng-select version: 2.1.3

browser: Chrome Version 67.0.3396.87

reproducible in demo page: No (It would be appreciated if added in the Demo page)

Thank you in advance.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 16 (5 by maintainers)

Most upvoted comments

Thanks, now I clearly see the issue. First param of FormControl is value, so changing new FormControl(null, Validators.required) works as expected.

+29

varnastadeus on Jul 2, 2018

You don’t see label because your model is set with valid value, empty object is also valid. You should use null or undefined in your case.

varnastadeus on Jul 2, 2018

countryCode: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(100)]]

I’m experiencing same like scenario. Using reactive forms and the default value is null. But the placeholder is hidden

kavinda1995 on Apr 8, 2020

can you create reproducible example?

varnastadeus on Jul 2, 2018