javascript - Form not editable if no match is found using UI-Bootstrap's typeahead directive? -

javascript - Form not editable if no match is found using UI-Bootstrap's typeahead directive? -

below relevant code how typeahead input box setup. essentially, user types in name , relevant info loaded rest of form. in case no match found, i'd user still able come in name , relevant info form.

when no matches found, form not editable. example, if type "john doe" name, , there no matches, cannot type "address" input box, code of shown below.

typeahead:

<label for="participant-name">name</label> <input name="participant-name" typeahead="participant participant.name participant in participants | filter:$viewvalue | limitto: 8" type="text" class="form-control" ng-model="entry.participant">

sample input box:

<label for="participant-street-no">address</label> <input name="participant-street-no" type="text" class="form-control" ng-model="entry.participant.street">

it's because when type string typeahead, entry.participant string, , not object. can't add together .street string. instead need create new object, take entry.participant string , assign object .name, , set entry.participant object.

here's how it: first set typeahead editable false. add together button typeahead input box (bootstrap's input groups job of this) says "new" , hides typeahead , replaces input box model of entry.participant.name. click new, set entry.participant = {}. swap "new" out "cancel" or "x" @ point.

edit

here's plunker! kept typeahead editable can see difference in model when select bob or jim compared when type string. otherwise model won't set until select dropdown.

javascript html angularjs angular-ui-bootstrap