fix(input): properly determine input value

[devversion]

Right now the MdInputDirective tries to cache the value of the input.

To do this, the MdInputDirective needs to listen for NgControl value changes and for native (change) events.

This will be problematic when a value is set directly to the input element (using [value] property binding) because Angular is only able to recognize this change in the first ChangeDetection.

<md-input-container>
  <input md-input [value]="myValue" placeholder="Label">
</md-input-container>

The approach of updating the value in the ngAfterViewInit lifecycle hook, will result in a binding change while being in a ChangeDetection, which leads to a ChangeDetection error.

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

The credits for the should update the value when using FormControl.setValue test go to @crisbeto

Fixes #2441. Fixes #2363. Fixes #2477

[kara]

@devversion I think this might break turning off floating placeholders, e.g.:

<md-input-container [floatingPlaceholder]="false">
   ...
</md-input-container>

Now that we're not listening to input events, the placeholder sticks around as the user types.

[devversion]

Great catch. I've chatted with @kara about this and we thought about alternate approaches than listening to the (input) event.

To let Angular notice this change we need the input event, which triggers a new round of change detection and then can update the md-empty class on the placeholder.

Similar to angular/angular#default_value_accessor.ts, which should also trigger a change detection.

Need confirmation that the input event will always trigger a new change detection as in the FormsModule.

[fxck]

can you get this at least into master? everything is kinda broken now

[kara]

Nitpick on the comment, otherwise looks good. @mmalerba will probably want to take a look too.

[kara]

Nitpick: Can you add some more detail here? I'd also add that if you're using one of the FormsModule or ReactiveFormsModule directives, the input event is already watched and will kick off change detection appropriately. But that if you're not using one of these and you've disabled the floating placeholder, we need to ensure that change detection still runs immediately on input to hide the placeholder.

[devversion]

Updated the comment.

[kara]

LGTM, waiting on @mmalerba

[kara]

@devversion Sorry, one more rebase

[devversion]

@kara Done.

[abdulhaq-e]

hey @devversion I still get this issue if there is a condition check in ngAfterViewInit/Checked. See this plunkr: http://plnkr.co/edit/eyN8D8oZuEwDhHLINsZ5?p=preview

[RicardoVaranda]

@abdulhaq-e I'm still having the same issue as you using master, if I don't use it in ngAfterViewInit it seems to crash the form and not display anything.

[abdulhaq-e]

@RicardoVaranda See this comment: #2837 (comment)

You need to use the ngOnChanges life cycle hook.

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