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>
Related
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">
i'm getting the response from back end that the mobile no is already present or is a new mobile no.but unable to to show the validation in my form that the mobile no is already registered.can anyone help me with that.
<div>
<md-content ng-app="shoppingPad" ng-controller="loginController">
<p class="Welcome-to-ShoppingP">Welcome to ShoppingPad</p>
<div>
<form name="myForm" ng-app="shoppingPad" class="myForm" ng-submit="submit()">
<div class="row formData">
<div class="col-xs-8">
<md-input-container>
<md-icon md-svg-icon="assets/images/device.svg"></md-icon>
<input type="number" placeholder="Enter user mobile no" name="mobile" id="mobile" ng-model="mobile" required phone-number-validator minlength="10">
<div ng-messages="myForm.mobile.$error">
<div ng-message="required">Registered mobile no.</div>
<div ng-message="phoneNumber">The mobile No entered has already been registered</div>
<div ng-message="test">too short</div>
</div>
</md-input-container>
</div>
<div class="col-xs-8">
<md-input-container>
<md-icon md-svg-icon="assets/images/lock.svg"></md-icon>
<input type="password" placeholder="Enter 3-D secure pin" name="password" id="password" ng-model="password" required minlength="6">
<div ng-messages="myForm.password.$error">
<div ng-message="required">Enter Pin no.</div>
<div ng-message="minlength">too short</div>
</div>
</md-input-container>
</div>
</div>
<!-- end of login form-->
<!-- login toolbar-->
<div>
<md-toolbar class="loginToolBar">
<md-button class="md-primary" ng-disabled="myForm.$invalid" style="margin-top: 15px;outline: none;" ng-click="login()">LOGIN</md-button>
</md-toolbar>
</div>
</form>
</div>
</md-content>
</div>
angular.module('shoppingPad').directive('phoneNumberValidator',phoneNumberValidator)
function phoneNumberValidator($q,restService){
var deferred=$q.defer();
return{
restrict:'EA',
require:'ngModel',
link:function($scope,element,attrs,ngModel){
ngModel.$asyncValidators.phoneNumber=function(modelValue , viewValue) {
var mobile= (modelValue || viewValue).toString();
console.log(mobile);
ngModel.$asyncValidators.userMobile=function(mobile){
return restService.getRequest('save/all',null).then(function(response){
console.log("inside get");
return deferred.promise;
},
function(error){
deferred.reject(error);
return deferred.promise;
}
)
};
}
}
}
}
I am unable to get automatic radio button checked when I edit the User From using following Html and AngularJs Code. When I console {{changeUser}} this returns following data
{"id":1,"username":"Ramesh","password":"Ramesh1#23","role":"admin","active":"no"}. When I load the edit form I have to automatically checked the no radio button in the following code.
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal form-bordered" name="editUserForm" data-ng-submit="userEdit(changeUser)">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username*</label>
<div class="col-md-4">
<input class="form-control" type="text" name="userName" data-ng-model="changeUser.username" value="{{ changeUser.username }}" data-ng-pattern="/^[a-z0-9_ .-]{5,15}$/i" required />
<span style="color:red" class="error" data-ng-show="editUserForm.userName.$error.pattern" >Only letters, integers, and underscores.Minimum 5 characters to maximum 15 characters.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password*</label>
<div class="col-md-4">
<input class="form-control" type="password" name="changePassword" data-ng-model="changeUser.password" value="{{ changeUser.password}}" data-ng-pattern="usersPattern.password" required />
<span style="color:red" class="error" data-ng-show="editUserForm.changePassword.$error.pattern">Minimum of 8 characters, 1 capital letter,1 lowercase, 1 special-case and 1 numeric.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn purple" data-ng-disabled= "editUserForm.$invalid">
<i class="fa fa-check"></i> Edit</button>
<button type="button" class="btn red" data-ng-click="cancelEdit()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
The Controller is
(function (){
"use strict";
function UsersEditController($scope, UserFactory, $http, $location) {
$scope.$on('$viewContentLoaded', function () {
App.initAjax(); // initialize core components
});
$scope.changeUser = {};
$scope.changeUser = UserFactory.get();
$scope.userEdit = function(data) {
$scope.changeUser = data;
console.log($scope.changeUser);
};
$scope.usersPattern = {
password: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%]).{8,20})'
};
$scope.cancelEdit = function() {
$location.path('users');
};
}
UsersEditController.$inject = ['$scope', 'UserFactory', '$http', '$location'];
angular.module('books').controller('UsersEditController', UsersEditController);
})()
And I guess this is your answer (even without js code provided :) )
https://stackoverflow.com/a/18446612/552194
You need to add ng-value and use it instead of the standard value
I have this dynamic form which entries I would like to save. The problem is that the saved entry is like this [{"name":"Noora","":{"Gender":"Woman","Address":"filler address"}}] I'm curios why the app saves the info after name like a nameless list. Name is hardcoded input and the other two (Gender and Address) can be dynamically added when using the program.
Here is the form entry html part:
<form>
<h2>Sign in:</h2>
<div class="form-group">
<label for="eventInput">Name</label>
<input style="width: 200px;" type="text" class="form-control" id="eventInput" data-ng-model="newEntry.name">
</div>
<div data-ng-repeat="field in event.fields">
<div class="form-group">
<label for="{{$index + 1}}">{{field.name}}</label>
<input style="width: 200px;" type="text" class="form-control" id="{{$index + 1}}" data-ng-model="newEntry.[field.name]">
</div>
</div>
<span>{{entries}}</span>
<div class='wrapper text-center'>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-4">
<button style="width: 100px;" data-ng-click="addEntry()" class="btn btn-primary">Enroll</button>
<p></p>
<button style="width: 100px;" data-ng-click="back()" class="btn btn-primary">Back</button>
</div>
</div>
</div>
</form>
and here is the controller:
App.controller('aboutController', function($scope, $location, $routeParams, eventService) {
$scope.event = eventService.getCustomers()[$routeParams.id];
$scope.back = function() {
$location.path('/');
};
$scope.addEntry = function() {
$location.path('/');
$scope.event.entries.push($scope.newEntry);
};
});
I would like to either be able to name the child list or just record the entries into a continuous list. Any idea how would it be possible?
Br,
Norri
I've created a basic angular form and can't determine why it's not submitting.
http://contact-info.checkoutbiblebowl.com/
The form validation is valid and it still won't submit. I feel like I've overlooked something silly, but have looked at this over the last few days and can't figure out what it is. Any suggestions?
<form method='post' action='' name='form' novalidate ng-controller="myController">
<div class="row form">
<div class="form-inline">
<div class="form-row">
<label class="form-label" style='margin-top: 20px'>Name</label>
<div class="form-item">
<div style="float: left">
First<br/>
<input type="text" ng-model="firstName" name="firstName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.firstName.$error.required" class="required">First name is required</div>
</div>
<div style="float: left; margin-left: 1em">
Last<br/>
<input type="text" ng-model="lastName" name="lastName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.lastName.$error.required" class="required">Last name is required</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="button-row">
<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="debug()">Submit</button>
</div>
</div>
</div>
</form>
My Controller:
<script type="text/javascript">
angular.module('contact', []).
controller('myController', function ($scope) {
$scope.debug = function () {
console.log($scope.form);
}
});
</script>
I think you just need to specify the action explicitly, not with an empty string otherwise angular will prevent the submission.
http://docs.angularjs.org/api/ng.directive:form
like so:
http://plnkr.co/edit/WtP03BFVyEsnOqf3n8a4?p=preview