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.
Related
I have a big problem in my form when I try to reset it everything is reset except the ng messages. I tried everything but nothing worked. I don't know why
Here is my form:
<md-content layout-padding>
<form name="projectForm">
<div layout="row">
<md-input-container flex="50">
<label>Name</label>
<input required name="clientName" ng-model="project.clientName" ng-focus="">
</md-input-container>
<md-input-container flex="50">
<label>Email</label>
<input required type="email" name="clientEmail" ng-model="newEmployee.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="projectForm.clientEmail.$error" role="alert" ng-show="message">
<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>
</div>
<div layout="row">
<md-input-container flex="50">
<label>Mobile</label>
<input required name="clientName" ng-model="newEmployee.mobile">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Address</label>
<input required name="clientName" ng-model="newEmployee.address">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required md-no-asterisk name="description" ng-model="newEmployee.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>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
<md-button ng-click="cancel()">Cancel</md-button>
</div>
</form>
</md-content>
and here is my reset function in the controller
$scope.reset = function() {
$scope.projectForm.$setPristine();
$scope.projectForm.$setValidity();
$scope.projectForm.$setUntouched();
}
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 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.
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 have view that contains list of people to add, each row represent a person, each row is an item in array of persons (people), I do repeat with ng-rpeat on this array, my issue when I add new row or load page the fileds start invalid even with novalidate, And any row have invalid input the fields become invalid.
The code :
HTML:
<ng-form name="pplForm" flex layout="row" layout-sm="column" layout-align="start center" ng-repeat="person in vm.company.People" ng-if="person.Status != 'deleted'">
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">First Name</label>
<input required name="firstName" ng-model="person.FirstName">
<div ng-messages="editCompanyForm.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Last Name</label>
<input required name="lastName" ng-model="person.LastName">
<div ng-messages="editCompanyForm.lastName.$error" >
<div ng-message="required">Last Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Phone Number</label>
<input name="phone" required ng-model="person.PhoneNumber" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/">
<div ng-messages="editCompanyForm.phone.$error">
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Email Address</label>
<input required minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" ng-model="person.Email" name="email">
<div ng-messages="editCompanyForm.email.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Invalid e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="end start" flex="15">
<md-button class="md-icon-button md-warn" type="button"
ng-click="vm.removePerson($index)" aria-label="Remove Person">
<md-icon md-font-icon="icon-minus-circle"></md-icon>
</md-button>
</div>
</ng-form>
Code inside controller:
var vm = this;
vm.people = People; // its resolved and come from backend could be {} initially.
vm.addPerson = addPerson;
vm.removePerson = removePerson;
if (!vm.company.People || vm.company.People.length === 0) {
addPerson();
}
function addPerson() {
if (!vm.company.People) {
vm.company.People = [];
}
vm.company.People.push({ Status : 'added'});
}
function removePerson(index) {
if (getActivePersons().length > 1) {
var person = vm.company.People[index];
// If is new person no need to send it at all.
if (person.Status && person.Status === 'added') {
vm.company.People.splice(index, 1);
} else { // If has status (or empty cuz is no action done before), then it need to be handeled from backend too.
vm.company.People[index].Status = 'deleted';
}
}
}
I just added the names for fileds, and postfix it with {{$index}} and this solved the all problems that I was have:
<ng-form name="pplForm_{{$index}}" flex layout="row" layout-sm="column" layout-align="start center" ng-repeat="person in vm.company.People" ng-if="person.Status != 'deleted'">
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">First Name</label>
<input required name="firstName_{{$index}}" ng-model="person.FirstName">
<div ng-messages="editCompanyForm.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Last Name</label>
<input required name="lastName_{{$index}}" ng-model="person.LastName">
<div ng-messages="editCompanyForm.lastName.$error" >
<div ng-message="required">Last Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Phone Number</label>
<input name="phone_{{$index}}" required ng-model="person.PhoneNumber" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/">
<div ng-messages="editCompanyForm.phone.$error">
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Email Address</label>
<input required minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" ng-model="person.Email" name="email_{{$index}}">
<div ng-messages="editCompanyForm.email.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Invalid e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="end start" flex="15">
<md-button class="md-icon-button md-warn" type="button"
ng-click="vm.removePerson($index)" aria-label="Remove Person">
<md-icon md-font-icon="icon-minus-circle"></md-icon>
</md-button>
</div>
</ng-form>