mdTextFloat: input not updating dirty and pristine

[ajberasategui]

Hi,
I'm experimenting with md-text-float inputs and validations.

Basically, validation is not working.

I'm inspecting the component state and found that $dirty neither $pristine properties are being updated when using the input.

You can see here that even when the viewValue has been populated, $dirty and $pristine are not updated.

{"$viewValue":"Agustin","$modelValue":"Agustin","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":true,"$invalid":false,"$error":{},"$name":"name","$options":null}```

[ThomasBurleson]

We are aware of these issues with md-text-float; and provide improvements in 0.7.0

[ajberasategui]

Ok thank you!

[ericrini]

I think having md-input-float template out so much HTML is a bad pattern, let me explain my reasons.

<md-input-float ng-required="true"></md-input-float>

When adding standardized Angular attribute directives like ng-required they will need to be copied from the "md-input-group" onto the "input" element. This necessarily creates a lot of complex scope transformations (as the current code reflects in managing the ng-model attribute) and prevents users from defining custom attribute directives that will be compatible with "md-text-float". Additionally, the user might want to put additional content into the md-input-group (for example a validation message), so even if you could make the attribute copying problem fully dynamic it would still be problematic for this reason.

What I want to propose is making md-input-group and md-text-float separate directives.

<md-input-group>
    <md-input-float ng-required="true"></md-input-float>
</md-input-group>

This makes things a LOT more flexible. For example I can add standard Angular attribute directives to "md-input-float" and they will just work. It can still insert a label in the directive compilation, as users are not likely to need to enhance the label tag and abstracting the accessibility concerns is nice.

For additional improvements consider this pattern.

<md-form name="formName">
    <md-input-group name="inputName">
        <md-input-float ng-required="true" ng-pattern="/.*/"></md-input-float>
        <md-validator type="required">Enter something.</md-validator>
        <md-validator type="pattern">Still not right.</md-validator>
    </md-input-group>
</md-form>

This is an example where the user wants to add more to the input-group than a form element. The "md-validator" elements can communicate with the "md-input-group" and "md-form" to determine the name of the field. For example "formName.inputName.$error.required". This creates nice abstraction from having such expressions in the HTML template.

If you guys agree with these ideas, I'd be happy to prepare a pull request.

[ngraef]

@ThomasBurleson are parsers and formatters for md-text-float included in this issue, or should I file a separate bug?

[ThomasBurleson]

@ngraef - Let's see what the 0.7 refactor provides first. Can you provide a code sample of what you are looking for ?

[ngraef]

Sure, here's a sample CodePen with a parser and formatter on a custom directive. Basically, the directive on md-text-float needs to be copied to the input element in the template.