I am trying to make use of md-chips alongside other inputs in a form that are inside md-input-containers.
I have had to add my own css hacks to get the placeholder text of the input, plus padding and margin applied to get it to look as close enough to an input inside an md-input-container as best I can.
I know I can't get md-chips to work inside an md-input-container (I dont think its supported yet)
Here is how I have an input followed by an md-chips appearing:
<div layout="row">
<md-input-container flex>
<label translate>Name</label>
<input ng-model="ctrl.name">
</md-input-container>
<div class="chips-container" flex>
<md-chips ng-model="ctrl.fruitNames">
<md-chip-template>
<span><strong>{{$chip}}</strong></span>
</md-chip-template>
<input type="text" placeholder="Enter Something">
<button md-chip-remove class="chip">
<md-icon class="material-icons">clear</md-icon>
</button>
</md-chips>
</div>
</div>
Working Codepen
Has anyone faced a similar situation needing to get md-chips with inputs aligning correctly alongside other inputs in similar layouts?
Just looking for suitable solutions, I can't see any combination examples on the Angular Material input demos.
Thanks
Related
I have a html as follows
<input ng-required="true" ng-model="Email" type="text" value="">
and i have a div as follows:
<div id="invalid" style="display: none">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
How can i make it that as soon as the user types in the input then the div is no longer visible or hidden using Angularjs. I know i need to use ng-show or hide but i cant seem to figure out how to put it together with the input ?
If you are using components it will look like this:
<div id="invalid" data-ng-hide="$ctrl.Email">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
If you are using old controller style:
<div id="invalid" data-ng-hide="Email">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
I would like to disable the input under certain conditions.
Show the value, but not beeing able to modify it.
I tried to add an ng disable, or ng class, but it doesn't look to work for me.
<div ng-controller="SettingsController">
<md-input-container ng-class="{'md-block' : model.isDisable" ng-disabled="model.isDisabled">
<input ng-model="obj.name" aria-label="name" />
</md-input-container>
</div>
http://plnkr.co/edit/cReJQlhNOBzB7VihhRS5?p=preview
Move your ng-disabled to the input tag. It should work.
<div ng-controller="SettingsController">
<md-input-container ng-class="{'md-block' : model.isDisable" >
<input ng-model="obj.name" aria-label="name" ng-disabled="model.isDisabled" />
</md-input-container>
</div>
Also there is an out-of-place '{' in the ng-class that bothers me but the code still works so I didn't change it since I don't know if it is necessary.
I have 2 related inputs in angular one is type number and the other is type text.
They both display the same value with the only difference being that the type text input displays the value of the type number input formatted for currency.
Only one of these is displayed at any given time. The behaviour I'd like is for the text input to be displayed initially and then on the click event the text input is hidden and the number input is shown. Similarly when the blur event happens on the number input the number input is hidden and the text input is shown.
The markup for this looks something like this:
<div>
<input type="number" ng-model="aValue" ng-blur="hideMeAndShowInputBelow">
<input type="text" ng-value="aValue | currency:'': '0'" ng-click="hideMeAndShowAndFocusInputAbove" readonly="readonly">
</div>
I know I could add extra properties to make this work but being relatively new to Angular this feels like the sort of thing that there is probably an elegant solution for.
Any help would be much appreciated.
You can assign a variable in ng-blur/ng-click and hide/show the inputs depending on the variable value.
<div>
<input type="number" ng-model="aValue" ng-show="showNumber" ng-blur="showNumber = false">
<input type="text" ng-value="aValue | currency:'': '0'" ng-show="!showNumber" ng-click="showNumber = true" readonly="readonly">
</div>
Check the plunker here:
https://plnkr.co/edit/yMFiXWuUF1R9BPGr2usT?p=preview
Alternatively, if this is a component you're going to use multiple times around your app, you could create a custom directive that achieves the same functionality, and thus avoid a lot of code duplication etc.
Try out something like this
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
<br />
<button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
</button>
</div>
DEMO
Thanks for the suggestions. I followed the same approach but because I had some additional requirements (I wanted the value to be focussed when switching to the edit mode so the user can edit immediately without having to click the input again) I ended up writing a directive. It's here:
PLUNKER
But here is the markup.
<div class="mt-flight-input" ng-class="{'mt-dirty': value.newvalue != value.initial, 'mt-zero': value.newvalue == 0}">
<input type="number" class="mt-input" placeholder="0" ng-show="value.isAuthoring" ng-model="value.newvalue" ng-blur="checkValue('blur', value)" ng-focus="checkValue('focus', value)">
<input type="text" class="mt-input" placeholder="0" ng-show="!value.isAuthoring" ng-value="value.newvalue | currency:'': '0'| comma2dots" ng-click="showEditor($event, value)" ng-focus="showEditor($event, value)" readonly="readonly">
</div>
I'm building a small search app using Elasticsearch and AngularJS. I'm using AngularJS UI bootstrap typeahead to implement autocomplete and I'm using ES's edge_n_grams and highlight object to 1) generate the suggestions and 2) highlight the suggestions, respectively. ES highlight object wraps the suggestions in HTML <em></em> tags... which seems to be causing some issues with how I have things setup.
1) When I press Enter key instead of clicking on the search button - all that happens is the search terms are displayed wrapped in the <em></em> tags AND no search is performed... <em>search terms</em>
2) When I select a suggestion with the mouse, same thing happens.
The only time search performs is when I type a query in and click the search button...
Here is the search form that I'm using, I have ng-submit="search()" on the form element and on the button, not sure where I'm going wrong......?
<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
<div class="input-group">
<input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">
<div class="input-group-btn">
<button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
</div>
</div>
</form>
Am I doing something wrong with the UI Bootstrap Typeahead?
More clarification
So basically what I'm asking is how do I get the tags stripped from the suggestions, on selection and for searching?
Similar kind of example already asked in Stackoverflow: Click here
I want to validate if the user is entering an input between 4-20 characters of length into a md-text-float (angular material directive), with plain angular I would just insert the ng-minlength and ng-maxlength attributes into an tag then validate. But in it doesn't work. How should I validate if the text float holds the required string length and enable the submit button?
<md-text-float label="password" data-ng-model="formPassword"
data-ng-minlength="4" data-ng-maxlength="20" type="password" data-ng-required="true"></md-text-float>
and then enabling.
<md-button class="md-raised md-primary" data-ng-click="submitLogin()" data-ng-disabled="loginForm.$invalid">login</md-button>
Actually For md-text-float directive ng-minlenght and all will not work, validations are still in progress,You can see the link also
https://github.com/angular/material/issues/372
Still, if you want to validate then try to validate it in controller itself to handle validation.
If you want to validate material design inputs, I would suggest using md-input-group directly rather than md-text-float (which uses md-input-group internally), until it supports validation out-of-the-box. I couldn't do a plunker for you, as the site is down - will try to do later on, once the site is back up.
But to give you an idea, the html will look something like this:-
<div class="field" layout="column" layout-align="center center">
<md-input-group>
<label for="email">Email</label>
<md-input type="email" id="email" name="email" required maxlength="50"
ng-model="loginVm.user.email"></md-input>
</md-input-group>
<span class="error-message email-error" ng-if="loginform.$submitted && loginform.email.$invalid">Please enter a valid email address.</span>
</div>