I'm new to angular material:
I want to show dialog for editing records in a table:
I referenced angular material and angular aria, used ngMaterial dependency and $mdDialog service.
I have a div containing all editing fields, the div visibility is set to hidden:
<div style="visibility: hidden">
<div class="md-dialog-container" id="taskEdit">
<md-dialog style="width:100%; height:100%" layout-padding>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Edit Task</h2>
<span flex></span>
</div>
</md-toolbar>
<ng-form name="TaskForm">
<div layout-gt-sm="row">
<md-input-container>
<label>Task Title</label>
<input name="TaskTitle" ng-model="task.title" required>
<div ng-messages="TaskForm.TaskTitle.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Description</label>
<textarea ng-model="task.description" md-maxlength="150" md-select-on-focus></textarea>
</md-input-container>
<md-input-container class="md-block">
<label>Due Date</label>
<md-datepicker style="margin-top: 2px;" ng-model="task.dueDate"></md-datepicker>
</md-input-container>
<md-input-container>
<label>Task Status</label>
<input name="TaskStatus" ng-model="task.status">
</md-input-container>
</div>
</ng-form>
<input class="btn btn-primary" style="width:15%" type="submit" ng-disabled="!TaskForm.$valid" ng-click="EditTask()" value="Submit" aria-label="submit" />
</md-dialog>
</div>
</div>
here's the showDialog function::
$scope.showDialog = function () {
$mdDialog.show({
controller: DialogController,
contentElement: '#taskEdit',
parent: angular.element(document.body),
clickOutsideToClose: true
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
}
but when I click the button, the dialog is not appearing properly, it lacks the animation and is rendered in the same layer as the parent page:
You need to refer the angular material css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
Related
I have the following Master Page:
<body ng-app="app" ng-controller="controller" ng-cloak>
<div class="header" ng-bind="header"></div>
<div class="content">
<!-- This content will switch -->
<ui-view></ui-view>
</div>
<div class="footer" ng-show="showFooter">
<md-button class="md-raised md-primary" ng-click="cancel()">Cancel</md-button>
<md-button class="md-raised md-primary" ng-click="ok()">OK</md-button>
</div>
And the following Add Contact page which goes in <ui-view> tags:
<form name="form">
<button class="round-button"></button><br />
<md-input-container>
<input name="name" ng-model="name" placeholder="Name" minlength="3">
<div ng-messages="form.name.$error" ng-show="form.name.$dirty">
<div ng-message="required">This is required.</div>
<div ng-message="minlength">Name has to be at least 3 characters long.</div>
</div>
</md-input-container>
<br />
<md-input-container>
<label>Phone</label>
<input name="phone" ng-model="phone" placeholder="Phone" ng-pattern="/^[0]{1}[5]{1}[0-9]{1}[0-9]{7}$/">
<div ng-messages="form.phone.$error" ng-show="form.phone.$dirty">
<div ng-message="required">This is required.</div>
<div ng-message="pattern">Please enter a valid phone number.</div>
</div>
</md-input-container>
<br />
<md-input-container>
<label>Mail</label>
<input name="mail" ng-model="mail" placeholder="Mail" ng-pattern="/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/">
<div ng-messages="form.mail.$error" ng-show="form.mail.$dirty">
<div ng-message="pattern">Please enter a valid mail.</div>
</div>
</md-input-container>
<br />
</form>
My Controller for Add Contact page is as follows:
controller: function ($scope, $state, $rootScope,$http) {
$rootScope.cancel = function () {
$state.go("contacts");
};
$rootScope.ok = function () {
var contactInfo = {
name: $scope.name,
phone: $scope.phone,
mail: $scope.mail,
address: $scope.address
};
$http.post("/api/Contact", contactInfo)
.then(function (res) {
alert("contact added successfully");
});
$state.go("contacts");
};
$rootScope.header = "Add Contact";
$rootScope.showFooter = true;
Before I call the web service using $http , I would like the OK button in the Master Page to be disabled until all fields in the form have been filled correctly.
Is there a way to achieve this goal?
You should be able to accomplish this by putting a ng-disabled directive on the button and have it check if the form is valid.
<md-button class="md-raised md-primary" ng-disabled="!form.$valid" ng-click="ok()">OK</md-button>
I am new in angularjs and making a dynamic form fields with ng-repeat and all my fields having the same ng-model
My Code:
<form name="dataset" class="md-inline-form" novalidate>
<div ng-repeat="column in columns">
<input type="hidden" name="column_name" ng-model="dataset.columnName" value="{{column}}">
<label for="">Column: <strong>{{column}}</strong></label>
<div layout="column" layout-gt-xs="row">
<md-input-container flex>
<label>Select Type</label>
<md-select name="type" ng-model="dataset.type" required>
<md-option value="string">String</md-option>
<md-option value="numeric">Numeric</md-option>
</md-select>
<div class="errors" ng-messages="dataset.state.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
</div>
</div>
<md-button type="submit" ng-click="SavevalidateColumns()" class="md-raised md-accent" aria-label="Submit">Validate Now</md-button>
</form>
Now i just want to get the values of my all dynamically created fields in my controller. Can any one help me regarding this ?
You have to use my code.
<form name="dataset" class="md-inline-form" novalidate>
<div ng-repeat="column in columns">
<input type="hidden" name="column_name" ng-model="dataset.columnName" value="{{column}}">
<label for="">Column: <strong>{{column}}</strong></label>
<div layout="column" layout-gt-xs="row">
<md-input-container flex>
<label>Select Type</label>
<md-select name="type" ng-model="dataset.type" required>
<md-option value="string">String</md-option>
<md-option value="numeric">Numeric</md-option>
</md-select>
<div class="errors" ng-messages="dataset.state.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
</div>
</div>
<md-button type="submit" ng-click="SavevalidateColumns(dataset)" class="md-raised md-accent" aria-label="Submit">Validate Now</md-button>
</form>
First You have to pass data in funciton.
Your controller code:
(function () {
'use strict';
angular.module('moduleName', [])
.controller('myCtrl',
function ($scope) {
$scope.SavevalidateColumns = function (dataset) {
var colName = dataset.columnName;
var type = dataset.type;
console.log(colName + "::::" + type);
};
});
})();
You have to inject this module into app also.
I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.
https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview
My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.
My form:
<div class="modal-body">
<form class="form-horizontal" name="contact" ng-submit="contactForm()">
<div class="form-group">
<label class="col-lg-3 control-label">Name* :</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email* :</label>
<div class="col-lg-8">
<input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile* :</label>
<div class="col-lg-8 row">
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
<div class="col-lg-8">
<input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message :</label>
<div class="col-lg-8">
<textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-7 col-lg-5">
<button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div>
</form>
</div>
Controller:
$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};
You are opening the modal using plain jQuery approach which is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.
Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service and inject the $http service to have your data posted.
Here is the working plunker using angular-ui bootstrap.
PLUNKER:https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>Email address:</label>
<input type="email" ng-model="user.email" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
</html>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
$scope.user = {
email: '',
password: null,
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$http({
method: 'POST',
url: 'https://mytesturl.com/apihit',
headers: {
"Content-type": undefined
}
, data: user
}).then(function (response) {
console.log(response);
$modalInstance.dismiss('cancel');
}, function (response) {
console.log('i am in error');
$modalInstance.dismiss('cancel');
});
//$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
I'm trying to understand what exactly is happening.
I had a form with Angular Material, something like:
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>First name</label>
<input ng-model="user.firstName">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Last Name</label>
<input ng-model="theMax">
</md-input-container>
</div>
... with the onfocus and onblur effecs + inputs layout full.
After that working, I change the form to work with directives and the form start to be like:
<div layout-gt-sm="row" class="core no-padding-bottom">
<!-- effect working -->
<md-input-container class="md-block" flex-gt-sm>
<md-icon><i class="material-icons">email</i></md-icon>
<input type="text" name="asd" placeholder="asd">
</md-input-container>
<!-- effect not working -->
<input-test name="name"></input-test>
</div>
... directive template:
<md-input-container class="md-icon-float md-block" flex-gt-sm md-no-float>
<md-icon class="material-icons">
<i class="material-icons">{{ attrs.icon }}</i>
</md-icon>
<input
type="text"
name="{{ attrs.name }}">
<div ng-messages="form[attrs.name].$error" role="alert">
<div ng-message="server">{{ form[attrs.name].$error.serverMessage }}</div>
</div>
</md-input-container>
... the directive:
app.directive('inputTest', function($injector, $q, $location) {
return {
replace: true,
restrict: 'AE',
scope: {
model: '=',
form: '='
},
templateUrl: baseViewPath('directives/form/text.html'),
link: function($scope, $element, $attrs) {
$scope.attrs = $attrs;
$scope.mask = function() {
if(typeof $attrs.mask !== 'undefined') {
return $attrs.mask;
}
};
}
};
});
Now, the form is working 50%, where is been send and validate as well but there's no Material effects and no full fields on screen.
What could that be?
UPDATE
I think that I "fixed" changing the placeholder to label
<label>{{ attrs.placeholder }}</label>
I need to set the ng-model via controller by selecting one of the listed images in Dialog and insert the ng-model of the form to record it in json-server.
My resource is provide by json-server.
Is there any way to do this? Or there's no way .. or some other way?
Template:
<form class="form-horizontal" role="form" ng-submit="addItem($stateParams.section)" enctype="multipart/form-data">
<div layout="row" layout-wrap>
<div flex="75">
<md-card>
<md-card-content>
<h2>Adicionar novo Post</h2>
<md-input-container>
<label>Digite o título aqui</label>
<input ng-model="item.title">
</md-input-container>
<md-input-container>
<label>Introdução</label>
<input ng-model="item.subtitle">
</md-input-container>
<md-input-container>
<label>Link permanente</label>
<input ng-model="item.slug">
</md-input-container>
<text-angular ng-model="item.content"></text-angular>
<md-input-container>
<label>Resumo</label>
<input ng-model="item.excerpt">
</md-input-container>
</md-card-content>
</md-card>
</div>
<div flex="25">
<md-card>
<md-card-content>
<h2>Configurações do Post</h2>
<md-input-container ng-controller="PublishedControl">
<md-select name="situation" ng-model="item.situation" placeholder="Status do Post">
<md-option ng-repeat="pub in publisheds" ng-value="{{pub.id}}">{{pub.name}}</md-option>
</md-select>
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex>
<label>Date</label>
<input type="date" ng-model="item.posted">
</md-input-container>
<md-input-container flex>
<label>Time</label>
<input type="time" ng-model="item.posted">
</md-input-container>
</div>
<md-card-footer layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-raised md-primary" type="submit">Salvar</md-button>
<md-button class="md-raised" ui-sref="listItems({section: $stateParams.section})">Cancelar</md-button>
</md-card-footer>
</md-card-content>
</md-card>
<md-card ng-if="categorias[0].cats">
<md-card-content>
<h2>Categorias</h2>
<div layout-padding>
<!-- <checkbox ng-repeat="cat in categorias[0].cats" value="{{cat.id}}" ng-checked="{{item.cats.indexOf(cat.id) > -1}}" ng-model="item.cats">{{cat.name}}</md-checkbox> -->
<label ng-repeat="cat in categorias[0].cats" style="display:block;" layout="row" flex="100">
<input type="checkbox" checklist-model="item.cats" checklist-value="cat.id"> {{cat.name}}
</label>
</div>
</md-card-content>
</md-card>
<md-card>
<md-card-content ng-controller="MediaController">
<h2>Imagem em Destaque</h2>
<div class="input-group form-group">
<figure ng-if="item.image"><img ng-model="item.image" ng-src="item.image" alt=""></figure>
<md-button class="md-raised" type="button" ng-click="chooseMedia($event)">Escolha uma Imagem</md-button>
</div>
</md-card-content>
</md-card>
</div>
</div>
</form>
Controller:
module.controller('MediaController', ['$scope', '$mdDialog', 'Media', function($scope, $mdDialog, Media) {
$scope.chooseMedia = function(ev){
$mdDialog.show({
parent : angular.element(document.body),
controller : chooseMediaControl,
ariaLabel : 'Choose Media',
targetEvent : ev,
clickOutsideToClose : true,
templateUrl : 'partials/tpl/media.html'
})
function chooseMediaControl($scope, $mdDialog, Media) {
$scope.media = Media.query();
$scope.cancelMedia = function() {
$mdDialog.cancel();
};
$scope.applyMedia = function() {
$scope.item.image = $scope.image;
$mDialog.hide();
};
$scope.inserMedia = function(imageurl){
$scope.image = imageurl;
};
}
}
}])
Service:
.factory('Media',function($resource){
return $resource('http://localhost:5000/media/:id',{id:'#id'},{
update: {
method: 'PUT'
}
});
})