question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

with reactive forms, when there is a value, the placeholder's div still exists

See original GitHub issue

Describe the bug it’s a obvious bug, and you can see it from official examples here: https://ng-select.github.io/ng-select#/forms

also here 截屏2019-11-1121 02 31

placeholder Select item and the selected value Batman both visible, this is because, there is no ng-has-value class, don’t know if this is an ng-select bug or angular.

Reproducbile example https://ng-select.github.io/ng-select#/forms

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:9
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
gilljuniorcommented, Apr 29, 2021

I fixed it by adding this style to version 6.1.0:

.ng-has-value .ng-placeholder { display: none; }

2reactions
tonivj5commented, Nov 11, 2019

3.5.0 is working properly too. I downgraded to 3.3.3 because I update from that version.

The issue comes from .ng-has-value class, which it isn’t being well-binded 😕

Maybe, because of the use of [class.ng-has-value]="hasValue" and class="ng-appearance-{{appearance}}" at the same time. Ref

UPDATE Doing a search I have found this: https://github.com/angular/angular/issues/15038#issuecomment-318017124

It seems applying both bindings at the same time is causing the issue…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Placeholder change based on the selection in a form
Given you are using reactive forms you can subscribe to the changes in the form and modify a variable in your TS file....
Read more >
Reactive forms - Smart HTML Elements
Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed...
Read more >
Angular Form Fundamentals: Reactive Forms - Ultimate Courses
We're going to explore the absolute fundamentals of the reactive Angular forms, covering FormGroup , FormControl , FormBuilder , submit ...
Read more >
Using Custom Async Validators in Angular Reactive Forms
I'm using @angular/material just to simplify our styles, and because it provides a clean way to display errors using the mat-error component.
Read more >
Conditional Validation in Reactive Forms - Codementor
How to use Angular validators with Angular reactive forms; How to implement conditional validations based on certain values in the form. Without ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found