I am new to Angular Material Design. I want to design a form which divides the date into three columns. I created two forms . The first form contains two div's and second form contain one div. I want each div in separate columns of the screen and Three div's should divide the screen width equally let's say 33.33% of 100% width but I am getting all the div's in only one column. Given below is the code I wrote:
<body ng-app="inputErrorsAdvancedApp">
<div ng-controller="AppCtrl" layout="column" ng-cloak>
<div md-content layout-padding>
<form name="userForm">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Date Of Birth</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Gender</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Mobile</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Address</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>City</label>
<input>
</md-input-container>
</div>
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>Country</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>State</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Phone</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Mobile</label>
<input>
</md-input-container>
</div>
</form>
<form name="security">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>old password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>New Password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Re-Enter Password</label>
<input>
</md-input-container>
</div>
</form>
</div>
Here is the plunker for the page I created
https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview
Please help me as how to resolve this issue.
Use layout="row" on the parent element. For example
<div layout="row" md-content layout-padding>
...forms...
</div>
Link to the docs: https://material.angularjs.org/latest/layout/container
You flex is like the dividing the screen. You can use like this. The screen must be divide to 100%. If you use 3 div or md-input-container flex should be 33. i.e 100/3. If you have 4 divs you should divide the screen 100% to 4 equal parts.
<div layout-xs="column">
<md-input-container class="md-block" flex="33">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label>Date Of Birth</label>
<input>
</md-input-container>
</div>
For more information visit the angular material official website.
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;
}
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.
I want to implement a 'same as above' mailing address and permanent address. But then i tick on the checkbox, it does not show that the mailing address and permanent address are the same. help?
controller
$scope.candidateData.MailingAddress = {};
$scope.$watch('mailingSameAsPermanent', function (value) {
if (value) {
$scope.candidateData.Address = $scope.candidateData.MailingAddress;
} else {
$scope.candidateData.Address = angular.copy($scope.candidateData.Address);
}
partial HTML:
<h3>Permanent Address</h3>
<md-input-container class="md-block">
<label>Address</label>
<input name="add" ng-model="candidateData.Address.Address1">
<div ng-messages="CandidateDetails.add.$error">
<div ng-message="required">
Please enter your address
</div>
</div>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input ng-model="candidateData.Address.Address2" placeholder="Address 2">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Country</label>
<md-select ng-model="candidateData.Address.Country">
<md-option> <!--ng-repeat="country in countries" value="{{country.Country}}"-->>
{{candidateData.Address.Country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Zip Code</label>
<input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/">
<div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zip code.</div>
<div ng-message="pattern" class="my-message">
That doesn't look like a valid postal
code.
</div>
</div>
</div>
<h3>Mailing Address</h3>
<md-checkbox ng-model="mailingSameAsPermanent" >
Tick if your mailing address is the same as your permanent address
</md-checkbox>
<div>
<md-input-container class="md-block">
<label>Address</label>
<input name="add" ng-model="candidateData.MailingAddress.Address1" ng-disabled="mailingSameAsPermanent">
<div ng-messages="CandidateDetails.add.$error">
<div ng-message="required">
Please enter your address
</div>
</div>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input ng-model="candidateData.MailingAddress.Address2" placeholder="Address 2" ng-disabled="mailingSameAsPermanent">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Country</label>
<md-select ng-model="candidateData.Address.Country">
<md-option>
<!--ng-repeat="country in countries" value="{{country.Country}}"-->>
{{candidateData.Address.Country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Zip Code</label>
<input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/">
<div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zip code.</div>
<div ng-message="pattern" class="my-message">
That doesn't look like a valid postal
code.
</div>
</div>
</div>
</div>
I've implemented the functionality the way you want to achieve but in different approach.
You can check out below link to understand.
https://jsfiddle.net/alpeshprajapati/U3pVM/23941/
$scope.permanent = {address:'helloworld', state: 'gujarat'};
$scope.click = function(){
if($scope.sameasabove){
$scope.mail = angular.copy($scope.permanent);
} else {
$scope.mail = {};
}
};
You need to implement this in your code.
Try this one
<input type="checkbox" ng-model="sameas" ng-click="!sameas?permanentAddress=presentAddress:permanentAddress={}" />
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>
I'm dealing with md-tabs-wrapper it gives the partial view of each category and a single save button as follow
The existing code for it
<md-dialog aria-label="Profile edit" class="profile-edit full-height">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Edit Profile</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="hide()">
<md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content >
<md-tabs class=" margin-bottom-40" md-dynamic-height md-border-bottom>
<md-tab label="Profile">
<div layout layout-sm="column">
<md-input-container flex="30">
<label>First Name</label>
<input type="text" ng-model="user.firstName">
</md-input-container>
<md-input-container flex>
<label>Last Name</label>
<input type="text" ng-model="user.lastName">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex="30">
<label>Other Name</label>
<input type="text" ng-model="user.otherName">
</md-input-container>
<md-select flex class="md-select-form" ng-model="user.gender" placeholder="Gender" ch-boolean>
<md-option ng-value="gender" ng-repeat="gender in ['Male', 'Female']">{{gender}}</md-option>
</md-select>
<md-input-container flex>
<label>Date of Birth</label>
<input type="date" ng-model="user.dateOfBirth">
</md-input-container>
</div>
<md-input-container>
<label>Profile Picture</label>
<input type="file" name="file" file-model = "user.myFile">
</md-input-container>
<md-input-container flex>
<label>Summary(max 200 characters)</label>
<textarea ng-model="user.description" md-maxlength="200"></textarea>
</md-input-container>
</md-tab>
<md-tab label="Experience" ng-init="">
<h2>Employment</h2>
<div ng-repeat="experience in user.experiences">
<md-input-container>
<label>Job title</label>
<input type="text" ng-model="experience.job_title">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex="66">
<label>Employeer Name </label>
<input type="text" ng-model="experience.company_name">
</md-input-container>
<md-input-container flex="33">
<label>Location</label>
<input type="text" ng-model="experience.location_name">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex="40">
<label>Start Date</label>
<input type="date" ng-model="experience.date_start" date-ob>
</md-input-container>
<md-input-container flex="40" ng-if="experience.current_work==0">
<label>End Date</label>
<input type="date" ng-model="experience.date_end" date-ob>
</md-input-container>
<md-checkbox flex ng-model="experience.current_work" ng-true-value='1' ng-false-value='0' aria-label="Current" style="margin: 5px;">
Current
</md-checkbox>
</div>
<md-input-container flex>
<label>Job Description </label>
<textarea ng-model="experience.job_des" ></textarea>
</md-input-container>
</div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">Add Position</md-button>
</md-tab>
<h2 class="md-subhead">Projects</h2>
<div>
<md-input-container>
<label>Project Title</label>
<input type="text" ng-model="user.jobtitle">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex="66">
<label>Employeer Name </label>
<input type="text" ng-model="user.employeer">
</md-input-container>
<md-input-container flex>
<label>Start Date</label>
<input type="date" ng-model="user.startDate">
</md-input-container>
<md-input-container flex>
<label>End Date</label>
<input type="date" ng-model="user.endDate">
</md-input-container>
</div>
<md-input-container flex>
<label>Project Details </label>
<textarea ng-model="user.jobDescription" ></textarea>
</md-input-container>
</div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">Add Projects</md-button>
</md-tab>
<div layout layout-sm="column">
<md-input-container flex>
<label>Primary Number</label>
<input type="text" ng-model="user.primaryNumber">
</md-input-container>
<md-input-container flex>
<label>Secondary Number</label>
<input type="text" ng-model="user.secondaryNumber">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex>
<label>Primary Email</label>
<input type="text" ng-model="user.primaryNumber">
</md-input-container>
<md-input-container flex>
<label>Secondary Email</label>
<input type="text" ng-model="user.secondaryNumber">
</md-input-container>
</div>
<h2 class="md-subhead">Social Media Links</h2>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-facebook-squre" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
</md-tab>
</md-tabs>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="hide()" class="md-primary">
Cancel
</md-button>
<md-button ng-click="answer(this)" class="md-primary">
Save
</md-button>
</div>
</form>
</div>
</md-dialog>
In my controller i have coded to save the each tabs content as it is
$scope.answer = function(answer) {
console.log(answer);
Profile.editProfilePro($scope.user);
Profile.editProfileExp($scope.user.experiences[0]);
$mdDialog.hide(answer);
};
I want to execute the Profile.editProfileExp($scope.user) only if current view in experience
The problem is how to save the current view tabs contents only in controller answer()?? Tell me your suggestions. Thanks .
you can have a scope variable as tabsdata for active tab, so that you can identify the selected Tab and add attribute "active="tabsdata.ExperienceTab" to you html "md-tab" tag it would provide you the active Tab status, and based on your selected tab execute your code.