I have tried every flex of every kind, layout-wrap, everything angular material I can think of.
I can't figure out how to make these inputs spaced out evenly.
I think the problem is
that every input is inside of an md-input-container and I can't put a md-datepicker inside of one because then it gives the user two lines for an input.
If someone could let me know how to space these out evenly it really would be awesome!
<form name="formData" action="http://localhost:3000/senddata" method="POST">
<md-input-container class="md-block" >
<label><i class="material-icons">face</i> Name</label>
<input type="text" name="name" ng-model="$ctrl.name"/>
</md-input-container>
<md-input-container class="md-block">
<label><i class="material-icons">explore</i> Zip Code</label>
<input required type="text" name="zipCode" ng-model="$ctrl.zipCode" ng-minlength="5" pattern="^\d{5}(?:[-\s]\d{4})?$"/>
<div ng-messages="formData.zipCode.$error" style="color:red;" role="alert">
<div ng-message="required">This field is required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</md-input-container>
<md-datepicker ng-model="$ctrl.myDate" class="md-block md-datepicker-focused" md-placeholder="Enter date" required md-max-date="$ctrl.maxDate"></md-datepicker>
<md-input-container class="md-block">
<label><i class="material-icons">search</i> Search:</label>
<input type="text" name="search" ng-model="$ctrl.search" required/>
<div ng-messages="formData.search.$error" style="color:red" role="alert">
<div ng-message="required">This field is required!</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary" ng-disabled="formData.$invalid" ng-click="$ctrl.getData()" style="float:right;">Submit
</md-button>
I know this is nearly two months old but wanted to let you know that this should be fixed in Angular Material 1.1.0, which was officially released 2016-08-14.
Datepicker didn't used to work well with md-input-container. If you're curious, you can also read the commit with the fix.
Related
I am working on md-input-container and I am trying change default asterisk color to red.
Plz take a look here
pen link
<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.description">
<div ng-messages="projectForm.description.$error">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
</div>
</md-input-container>
<div layout="row">
<md-input-container flex="50">
<label>Client Name</label>
<input required="" name="clientName" ng-model="project.clientName">
<div ng-messages="projectForm.clientName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Project Type</label>
<md-select name="type" ng-model="project.type" required="">
<md-option value="app">Application</md-option>
<md-option value="web">Website</md-option>
</md-select>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Client Email</label>
<input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/">
<div ng-messages="projectForm.clientEmail.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Hourly Rate (USD)</label>
<input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" ng-pattern="/^1234$/">
<div ng-messages="projectForm.rate.$error" multiple="" md-auto-hide="false">
<div ng-message="required">
You've got to charge something! You can't just <b>give away</b> a Missile Defense
System.
</div>
<div ng-message="min">
You should charge at least $800 an hour. This job is a big deal... if you mess up,
everyone dies!
</div>
<div ng-message="pattern">
You should charge exactly $1,234.
</div>
<div ng-message="max">
{{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
doubt even Bill Clinton could afford that.
</div>
</div>
</md-input-container>
<div>
<md-button type="submit">Submit</md-button>
</div>
<p style="font-size:.8em; width: 100%; text-align: center;">
Make sure to include ngMessages module when using ng-message markup.
</p>
</form>
The asterisk's default color is gray right next to"Client Name" label.(if you click the field, its color changes to red.) Is there any way that I can change the default color of the asterisk from gray to red?
thanks in advance,
Add the following to your CSS :
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
color:red;
}
For some reason just giving the following does not work :
label.md-required:after {
color:red;
}
Refer this codepen link
I have a simple form built using angular material. have referred angular material demo for this.
The fields are marked required and if the input is not made then a field required message is displayed. But the message doesn't vanish once a valid entry is made. Whereas, in the official demo this works.
This is the HTML code pertaining to the form:
<form name="myform">
<md-input-container flex="50">
<label>Name</label>
<input required name="name" ng-model="project.name">
<div ng-messages="myform.name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input required type="email" name="email" ng-model="project.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="myform.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary">Submit</md-button>
</form>
What could be the problem here?
You forgot to inject ngMessages to your app.
angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
I have this simple working form, but when I put this in a $mdDialog it doesn't disable the submit button anymore... it basically ignores the networktypeForm.$invalid Is this common or is there a fix for this?
<form name="networktypeForm" ng-submit="add()" novalidate role="form">
<div class="md-dialog-content">
<md-input-container md-no-float flex>
<label>Element type</label>
<input flex ng-model="type" name="networktype" type="text" required="">
<div ng-messages="networktypeForm.networktype.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
</div>
<md-dialog-actions layout="row">
<md-button type="submit" class="md-primary md-raised" ng-disabled="networktypeForm.$invalid">
Add
</md-button>
</md-dialog-actions>
</form>
your requireds should be like this required not required="" or required="required"
For those still looking at this, I had a similar issue and mine was solved by removing the "novalidate" attribute.
I have the following form:
<form name="newCollectionForm" ng-submit="onSubmit()">
<md-input-container class="md-block">
<label>Name</label>
<input name="collection"
ng-model="new_collection_model"
ng-trim="true"
ng-minlength="3"
ng-maxlength="50"
md-maxlength="50"
required>
<div ng-messages="newCollectionForm.collection.$error">
<div ng-message="required">You must supply a name for the Collection.</div>
<div ng-message="maxlength">The name must no contain more than 50 characters.</div>
<div ng-message="minlength">The name must be at least 3 characters.</div>
</div>
</md-input-container>
</form>
The only Issue is that it does not show the errors messages. It only show the error state but without showing the corresponding message.
I have tried many variants and no success.
Any help?
I have created a plunker for you.
https://plnkr.co/edit/MvFaXjseWt8ILRpsbftq?p=preview
you will have to do the following thing to make your code to work.
1: inject ngMessages in your module.
var app = angular.module('app', ['ngMessages']);
2: include this js file in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>
Hope this will help you.
Well, at least I could show the messages making some changes:
<form name="newCollectionForm" ng-submit="onSubmit()" novalidate>
<md-input-container class="md-block">
<label>Name</label>
<input name="collection"
ng-model="new_collection_model"
ng-trim="true"
ng-minlength="3"
ng-maxlength="50" md-maxlength="50" required>
<div ng-show="newCollectionForm.collection.$error" role="alert">
<div class="form_error" ng-show="newCollectionForm.collection.$error.required">You must supply a name for the Collection.</div>
<div class="form_error" ng-show="newCollectionForm.collection.$error.maxlength">The name must no contain more than 50 characters.</div>
<div class="form_error" ng-show="newCollectionForm.collection.$error.minlength">The name must be at least 3 characters.</div>
</div>
</md-input-container>
</form>
I'm having problem with designing simple form.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
This is how it looks, I don't know am I doing something wrong? I'm new to this framework. I want all inputs to be aligned to same base line, and I wan't to add icons in front of text inputs.
There are known issues with input alignment at the moment. You would have to tweak some margins if you want to align it yourself.
https://github.com/angular/material/issues/6636
https://github.com/angular/material/issues/6219
You can get icons in the input containers by specifying a <md-icon>.
<md-input-container class="md-icon-float md-block">
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
Check the documentation for more input examples.
Your structure has only one md-content under the layout="column". To stack the md-input-container and md-datepicker items you would need to add layout="column" to the form tag <form name="search" layout="column">which is the tag that is the parent to the tags your want to stack in a column.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search" layout="column">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>