Add md-no-asterisk to inputs

[prowwid]

Bug, feature request, or proposal:

request

What is the current behavior?

There is no ability to remove asterisks from placeholders in inputs with required attribute.

What is the expected behavior?

We need an ability to disable asterisks on required inputs like in the first version of material UI by using "md-no-asterisk" attribute in input.

In the end, it would be good enough to have syntax like in the following example:
Plunker md-no-asterisk example

What is the use-case or motivation for changing an existing behavior?

For now, there are two hacks to remove asterisks from inputs:

1. do not use "required" attribute
2. use "required" attribute with hacks that would hide or remove automatically added asterisk

Both options are crutches. And as you know crutches are really bad things.

[mizdler]

I think currently simplest solution is to change mat-placeholder-required CSS class:
.mat-placeholder-required { display: none; }

[prowwid]

Hi, @mizdler

Yes, you are right.
But, as I've already said in the description, it is a hack.

If we do not need asterisk It would be really nice to have the ability to disable asterisk in input without modification of styles.
For example, login credentials - both nickname and password are required but who would mark those fields was asterisks?

[jefersonestevo]

I agree that this option should be available, but I think it may be used as a mdInput @Input() property, like the disableRipple property from md-list.

Something like:
<input type="text" mdInput required ... mdNoAsterisk />

Or it'll be better just to be named noAsterisk ?

If you want I can send a PR with this change.

[ryanp-bitfocus]

In material 1 mdNoAsterisk already existed and worked for this purpose. As seen on the documentation here https://material.angularjs.org/latest/api/directive/mdInput

[mbeckenbach]

@prowwid
Why should one not want to customize CSS in components styles and make usw of view encapsulation?

[M-a-c]

@mbeckenbach I think the idea is you specified something and it changed what you expected, maybe they shouldn't have been rendered in the first place.

https://material.io/guidelines/components/text-fields.html#text-fields-layout the spec says that "In forms with some required fields, indicate all of the required ones. However, if there are fewer optional fields, indicate those instead"

So essentially to get the proper functionality where a form has more optional fields than required fields you have to do something hacky with the styles instead of telling the component to not use the asterisks.

It seems to meet the spec, users should be able to turn off the asterisks.

@jefersonestevo go for the pr see what happens? ¯\(ツ)/¯

[mmalerba]

Talked with @jelbourn, we're up for adding a hideRequiredMarker attribute to md-input-container. Anyone want to take this on?

[M-a-c]

@mmalerba I might be able to, but @jefersonestevo said they could submit a pr.
Is there a component you can point to that has a similar disable option?

[mmalerba]

The required field on MdInputDirective is a good example for how to do a boolean @Input() https://github.com/angular/material2/blob/master/src/lib/input/input-container.ts#L162

[M-a-c]

Awesome thanks!

[prowwid]

Hi @mbeckenbach

Why should one not want to customize CSS in components styles and make usw of view encapsulation?
because

Because customization of CSS is a hack for this use-case. If you don't need an asterisk - don't even render it.

Basically input component does more work than it should and renders redundant content.
In our systems, we have a lot of inputs and most of them are required but design dictates not to use asterisks. So we receive a lot of redundant HTML using "required" in inputs.

[jefersonestevo]

@mmalerba I've created the PR #4237 to add the attribute hideRequiredMarker to the md-input-container. Please give it a look when you have some time.

Thanks

[roelzkie15]

Is this isn't available on md-select component? i have material2 v2.0.0-beta.8

Because i got this error:

Template parse errors: Can't bind to 'hideRequiredMarker' since it isn't a known property of 'md-select'.

[angular-automatic-lock-bot]

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