fix(material-experimental/mdc-input): only apply styling when inside a form field

[crisbeto]

Currently mat-form-field brings in the styles for MatInput. but the problem is that they target a class that is applied even to inputs that aren't inside a form field.

These changes aim to prevent CSS from bleeding out by only styling inputs inside a mat-form-field.

Fixes #21871.

[crisbeto]

Caretaker note: this has the potential of breaking existing apps. We should re-evaluate the fix if it affects a lot of g3 targets.

[mmalerba]

LGTM

[mmalerba]

I'll try presubmitting it, if it proves too breaking we could at least try again with just the MDC components.

[mmalerba]

broke ~200 targets, lets try just the MDC ones

[jelbourn]

@mmalerba if we do end up submitting this with only the MDC version fixed, we'll need to update the docs to mention this difference in behavior.

[mmalerba]

Alternatively we could just not do this at all. There's no real reason to use MatInput outside of a MatFormField, but I think some people are doing it just for the styles. Making the change would hopefully take away people's incentive to do that

[jelbourn]

I do see the desire to do this specifically for matChipInput, though. I think it's valid to use a chip + input combination outside of a form-field.

[crisbeto]

Are we sure that the presubmit is due to people using MatInput without a form field, rather than me messing something up while making the change? I did spend time testing it, but it's possible that I missed something.

An alternative could be to throw an error if MatInput isn't in a form field, but that'll likely be even more breaking.

[mmalerba]

I think the main issue is that people are intentionally using it outside the form-field, simply as a way to clear the input styles (background, border, etc)

[crisbeto]

I've changed the PR so it only affects the MDC version of the input.

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