mdInput: placeholder shows "undefined" if it is a bound value
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
If a placeholder is bound to a property on the containing component, and the property is undefined, no placeholder should be shown.
What is the current behavior?
If a placeholder is bound to a property on the containing component, and the property is undefined, ‘undefined’ is shown as the placeholder.
What are the steps to reproduce?
(template Plunkr does not work at the moment, therefore simply pasting an example in GitHub)
<md-input-container class="col s3">
<input mdInput [placeholder]="myPlaceholder" type="text" formControlName="foo"></input>
</md-input-container>
@Component({
selector: 'my-component',
templateUrl: 'my.component.html'
})
export class MyComponent {
myPlaceholder;
}
What is the use-case or motivation for changing an existing behavior?
In cases where an input placeholder is bound (for instance in the context of a generalized wrapper around the input), it is useful to be able to have the placeholder be shown or hidden depending on the presence of the bound property.
Which versions of Angular, Material, OS, browsers are affected?
Angular 2.4, Material 2.0.0-beta.2
Is there anything else we should know?
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
mdInput: placeholder shows "undefined" if it is a bound value ...
If a placeholder is bound to a property on the containing component, and the property is undefined, 'undefined' is shown as the placeholder....
Read more >How to display placeholders in AngularJS for undefined ...
This answer is simple and clean, but the drawback is that it will not only display the placeholder on null and undefined ,...
Read more >Directives - - - md-select - AngularJS Material
Displays a select box, bound to an ng-model. ... Note: A value of undefined is considered a valid value (and does not auto-apply...
Read more >Angular2/material 2: md-input-container label is not resetting ...
Coding example for the question Angular2/material 2: md-input-container label is not resetting float when value is changed programmatically-angular.js.
Read more >Input - Chakra UI
You can change the border color that shows when the input receives focus ( focusBorderColor ) and when isInvalid is set to true...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It’s difficult to diagnose without a reproduction of the issue. Here is a plunker that works (doesn’t show “undefined” as the placeholder):
http://plnkr.co/edit/4oA07xeCwao3JtBWjhOO?p=preview
Do you think you could try to reproduce it based off that?
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.