Our team is creating a mdDialog that brings up a tabbed form and using ng-switch for different input types. Our ng-model works on choice inputs, boolean inputs, and string inputs, but keep getting an error for mddatepicker.
<div ng-switch-when="choice">
<md-input-container class="md-block">
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" value={{element.q_value}} ng-model="element.answer">
<md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}">
{{option.element_choice_label}}
</md-option>
</md-select>
</md-input-container>
</div>
<div ng-switch-when="boolean">
<md-checkbox id={ {element.section_element_name}} ng-model="element.answer">{{element.section_element_label}}</md-checkbox>
</div>
<div ng-switch-when="glide_date">
<md-input-container>
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-datepicker id={ {element.section_element_name}} ng-model="element.answer" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
When the form is submitted, we see an error: The ng-model for md-datepicker must be a Date instance. Currently the model is a: string
How can we modify the code so that the ng-model for just mddatepicker's get transformed into a date format?
Related
I created a webpage with Angularjs and Laravel. It's an event page.
In my admin-panel I can manage all events.
When I click at "Bearbeiten" a new window appears.
At the bottom I can add/remove different attractions. When I submit the form, I want save the new data in the database, but I don't know how I can get the data from the formula. I tried different thinks and yes I used google.
When I click at "Bearbeiten" following code will be executed:
<md-dialog-content style="padding: 20px;">
<div layout-gt-sm="row">
<md-input-container class="md-block"flex-gt-xs>
<label>Name (Bsp: Schützenfest, Kirmes, Sommerdom)</label>
<input value="{{ $data['event']->name }}" name="event_name">
</md-input-container>
<md-input-container class="md-block">
<label>Stadt (Bsp: Hannover, München, Köln)</label>
<input value="{{ $data['event']->city }}" name="event_city">
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Straße</label>
<input value="{{$data['event']->street }}" name="event_street">
</md-input-container>
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Postleitzahl</label>
<input value="{{ $data['event']->zip->id }}" name="event_zip">
</md-input-container>
<md-input-container class="md-block" style="margin: 0">
<label>Webseite</label>
<input value="{{ $data['event']->website }}" name="event_website">
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Start (YYYY-MM-DD)</label>
<input value="{{$data['event']->start }}" name="event_start">
</md-input-container>
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Letzter Spieltag (YYYY-MM-DD)</label>
<input value="{{$data['event']->end }}" name="event_end">
</md-input-container>
</div>
<md-chips ng-model="mdDialogData[0]" name="event_attractions" readonly="false"
md-removable="true" md-max-chips="100" placeholder="Attraktionen">
<md-autocomplete
md-selected-item="mdDialogData[1].selectedItem"
md-search-text="mdDialogData[1].searchText"
md-items="item in mdDialogData[1].querySearch(mdDialogData[1].searchText)"
md-item-text="item"
placeholder="Attraktion suchen">
<span md-highlight-text="mdDialogData[1].searchText" style="width: 280px;">#{{ item }}</span>
</md-autocomplete>
<md-chip-template>
<strong style="margin-right: 15px;">#{{$chip}}</strong>
</md-chip-template>
</md-chips>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="answer([#{{ mdDialogData[0] }}, '1', '2'])">
Änderungen speichern
</md-button>
<md-button ng-click="answer('useful')">
Abbrechen
</md-button>
</md-dialog-actions>
I am not really good with angular. Maybe are here some experts!
Since the data is already populating on the popup, I will assume you have correctly passed the data array to the function/module responsible for the popup.
Now, all you need is to update the array containing variable data fields that you are modifying. You will need to remove the data you chose to remove from the array, or keep adding if you are adding new values. You will then need to pass updated array as you click on ABBRECHEN and need to update the new values in the DB. The data removed from the array will create empty spaces in the array, you can either remove it on the Angular or Backend, or simply put the logic to skip if particular index is null/undefined.
I am using Angular Material and have a couple of select inputs on a form that I would like to separate with a piece of static text.
Both the selects are in md-input-containers and so the text that sits between the two needs to have the same padding around as so I have had to use a further input container to hold the static text like so:
<div layout="row" flex layout-padding>
<md-input-container flex>
<label translate>Select 1</label>
<md-select ng-model="option1" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label></label>
<input type="text" value="label" readonly>
</md-input-container>
<md-input-container flex>
<label translate>Select 2</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
</div>
Working fiddle
It feels a bit hacky, and I wondered if anyone had any better suggestions.
I dont want the text to have any border bottom on, I know I could just roll my own css, but I wondered if there was a way out of the box using the AM framework?
It is very simple. Just use span element with layout-align attribute on parent element.
Here is the code
<div layout="row" flex layout-padding layout-align="start center">
<md-input-container flex>
<label translate>Select 1</label>
<md-select ng-model="option1" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
<span flex>Label</span>
<md-input-container flex>
<label translate>Select 2</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
</div>
Here is working Example. http://codepen.io/next1/pen/PzbXpv
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.
This is my view code......
<md-select aria-label="..." ng-model="topping">
<md-option>Show All</md-option>
<md-option>Fit width</md-option>
<md-option>Full Size</md-option>
<div style="height: 100px;overflow-y: scroll; border-top: 1px solid #ccc">
<md-option>100%</md-option>
<md-option>75%</md-option>
<md-option>50%</md-option>
<md-option>33.33%</md-option>
<md-option>25%</md-option>
<md-option>12.5%</md-option>
<md-option>8.33%</md-option>
</div>
</md-select>
When I click on scroll bar the drop-down disappears and I am not able to select any option
I had the same problem, my <md-select> options weren't scrolling. When I put flex="20" into <md-input-container> it scrolled. Here's my full code:
<md-input-container flex="20">
<label ng-switch on="nativeLanguage" class="md-subhead">
<span ng-switch-when="en-US">Change to clip:</span>
<span ng-switch-when="es">Cambiar a acortar:</span>
<span ng-switch-when="zh">更改为剪辑:</span>
<span ng-switch-when="jp">クリップに変更:</span>
<span ng-switch-default>Change to clip:</span>
</label>
<md-select name="selectClip" ng-model="selectClipInMovieWatching">
<md-option ng-repeat="element in clipArray" ng-value="element">
Clip: {{element}}
</md-option>
</md-select>
</md-input-container>