These are chat archives for angular/material

17th
May 2016
color me confused : why doesn't the md-autocomplete have a ng-model ?
Rajeev Sharma
@rajeevkumarsharma
May 17 2016 12:30 UTC
ok, very definately confused about autocomplete
I have a property (foo) that I want to update, or choose from a selection
there is no ng-model on autocomplete, so I presume I need an input - but how do i tie the two together (ie I want a floating label and a text box, and a drop down that is searchable)
#1: found the option for a floating label - oddly enough, it's md-floating-label="Select a state" :)
still looking at how I can tie in the ng-model though
Ludwig Behm
@lbehm
May 17 2016 15:38 UTC
@jmls use md-selected-item
and md-search-text for the input value
and no, you can't use the same model for both
md-search-text is for the "text" - not the value, right ?
Ludwig Behm
@lbehm
May 17 2016 15:43 UTC
I use something like this: <md-autocomplete md-selected-item="tmpModel" md-search-text="model" md-items="item in models|filter:model" md-floating-label="Stufff" md-selected-item-change="model=tmpModel||model||''" md-min-length="0" md-match-case-insensitive md-no-cache><md-item-template>
mmm, ok, so that looks "simpler" than the examples .. especially the filtering
Ludwig Behm
@lbehm
May 17 2016 15:45 UTC
which uses the visible input as search-text and if you select a item in the dropdown (updates tmpModel), it updates (with md-selected-item-change) the input-field (model)
thx
Ludwig Behm
@lbehm
May 17 2016 15:48 UTC
but I have to mention that I have currently a problem with that if 2 md-autocomplete input elements are present in the same form: the first on-change doesn't triggers...
ok
Ludwig Behm
@lbehm
May 17 2016 15:50 UTC
which results in a missing dropdownbox if the user clicks in the input field. after a input change everything is fine
now, I am also trying to implement validation ("please select a state") if the user enters an incorrect value
            <div ng-messages="$ctrl.form.State.$error">
                <div ng-message="itemMissing">select item</div>
            </div>
my $ctrl.form.State is this:
{
    "$viewValue": "Alaska",
    "$modelValue": "Alaska",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [null],
    "$formatters": [null, null],
    "$viewChangeListeners": [],
    "$untouched": false,
    "$touched": true,
    "$pristine": false,
    "$dirty": true,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "State",
    "$options": null
}
and when I select an invalid state, the $error becomes
"$error":{"itemMissing":true}
the line turns red, but the message never shows
I must be missing something really obvious
I have <form name="$ctrl.form" novalidate ng-submit="$event.preventDefault()">
and md-input-name="State" on the auto-complete
ah, ffs
all that time messign about trying to get it working
I missed the closing > of md-autocomplete ....
grrrr

@devimplode : sorry, but I'm still kinda confused about mapping to a model : using md-select as an example, I have a table of state codes [{code: "AL", name: "Alaska"},{..}]

        <md-select ng-model="$ctrl.data.stateCode">
            <md-option ng-repeat="item in $ctrl.states" value="{{item.code}}">{{item.name}}</md-option>
        </md-select>

so, on startup, this if $ctrl.data.stateCode is "AL", the selection displays "Alaska". When I browse the selection, I see the list of state names, and when I choose the state, then $ctrl.data.stateCode is set to the code, not the name of the select item

how do I replicate this, but using autocomplete instead of select ? I think that I can set the value of the model whenever the item is changed, but how do I get it to display the current value on startup like selection does ?
Ludwig Behm
@lbehm
May 17 2016 16:23 UTC
This message was deleted
just provide your value in md-search-text="$ctrl.data.stateCode"
i thought the search was on the "name"
but I'll try, thanks
Ludwig Behm
@lbehm
May 17 2016 16:27 UTC
which name?
I'm showing the state names in the auto-complete, just like the selection, but want to store the state code
so in the selection html above, I see the state names, but when I select one, it's the state code that is put into the ng-model
I want to do the same with auto-complete - show the names, store the code
perhaps i'll knock up a codepen to explain what I want ;)
okies:
I have 2 states: one chosen by autocomplete and one by selection
as you can see, the one with selection defaults to the state in state2
and when I change the selection, state2 is updated accordingly
how can I replicate this functionality with the auto-complete ?
Ludwig Behm
@lbehm
May 17 2016 17:33 UTC
add this to your constructor
    self.selectedItem = self.states.filter(createFilterFor('Alaska'))[0];
    self.searchText = self.selectedItem.display;
I was afraid of that ... I only have the code, not the description. So I'm going to have to search the results for the code, once I find the appropriate state, get the name, then do what you suggest
That's an embuggerance ;)
thanks
especially as the selection directive does it all for you already :(
fwiw, I used lodash to do the search for me
Ludwig Behm
@lbehm
May 17 2016 22:01 UTC
@jmls can you give a example what the search does?