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.

mdInput: placeholder shows "undefined" if it is a bound value

See original GitHub issue

Bug, 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:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
willshowellcommented, Mar 30, 2017

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?

0reactions
angular-automatic-lock-bot[bot]commented, Sep 8, 2019

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.

Read more comments on GitHub >

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

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