Angular form inputs to array with Validation - javascript

Is there a way in angular js to push a list of managers(or any item) to an array with validation in angular. I basically want to create an array as the ng-model and still validate it. Is this possible to do or am i going about it the wrong way?
var app = angular.module("FormTest",[]);
app.controller("AppCtrl", ["$scope", function($scope){
var appCtrl = this;
appCtrl.appName = "Form Array";
$scope.managers = [""];
$scope.form = {};
$scope.form.managers = $scope.managers;
$scope.addManager = function(){
$scope.managers.push('');
}
$scope.removeManager = function(index){
if($scope.managers.length > 1){
$scope.managers.splice(index, 1);
}
}
}])
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector('html'), ["FormTest"]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="AppCtrl as app">
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<div class="btn btn-primary" ng-click="addManager()">add manager</div>
</div>
</div>
<form novalidate name="form">
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
</div>
<div class="col-md-1">
<div class="btn btn-default">
<span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
</div>
</div>
</div>
</div>
</form>
</div>

In your example, all right, except for that of the regular expression.
Look at the example code jsfiddle.
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<button class="btn btn-primary" ng-click="addManager()">add manager</button>
</div>
</div>
<form novalidate name="form">
Form valid={{form.$valid|json}}
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
{{form['manager'+$index].$error}}
</div>
<div class="col-md-1">
<div class="btn btn-default">
<button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
</div>
</div>
</div>
</div>
</form>

Related

How to button show and hide html form with angular

I'm still learning to programme.
How I can show and hide two not very different HTML forms with a button in Angular?
I have a code but it shows only two forms and doesn't hide them.
I want to display these two forms on one row. How I can do this?
Please help me.
My HTML code:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()" >Show Div</button>
<button class="btn btn-primary" ng-click="showDiv1=true; hideMe()" >Show Div1</button>
<div ng-show="showDiv">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запазване</button>
</form>
</div>
</div>
</div>
<div ng-show="showDiv1">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Отлагане</button>
</form>
</div>
</div>
</div>
</body>
</html>
Angular code. Maybe it is not very right i think, but you will help me.
Thanks again!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
You have to set variable to false(ng-show), and then when user click the button, set variable to true:
Leave ng-click attribute like this:
<button class="btn btn-primary" ng-click="hideDiv()" >Show Div</button>
<button class="btn btn-primary" ng-click="hideDiv1()" >Show Div1</button>
Then:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.showDiv1 = false;
$scope.hideDiv = function(){
if ($scope.showDiv) {
$scope.showDiv = false;
} else {
$scope.showDiv = true;
}
}
$scope.hideDiv1 = function(){
if ($scope.showDiv1) {
$scope.showDiv1 = false;
} else {
$scope.showDiv1 = true;
}
}
});
Here is a demo that may help you get started. Go over the docs for ng-show and ng-click
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
$scope.showHello = true;
$scope.showBye = false;
$scope.toggleBye = () => {
$scope.showBye = !$scope.showBye;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="HelloController">
<h2 ng-show="showHello">Hello</h2>
<h2 ng-show="showBye">Bye</h2>
<h2>Show always</h2>
<button ng-click="toggleBye()">toggle bye</button>
</div>
</body>

Angular form - disable validation by ng-required

I have a email field in a form:
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.model.signAgreement"
ng-model="vm.model.emails.beitEsek">
</div>
In my controller vm.isMailReqired is set to false but still the emailBox.$invalid is true and as a result my form controller(formsToSign) is false - formsToSign.$valid:false.
EDIT - entire form
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek">
</div>
<div class="col-xs-4">
<label>Secondary maik</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox1"
input-change = "vm.mailField"
ng-model="vm.model.emails.emailField"
>
</div>
<div class="col-xs-4">
<label>Manger Mail</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox2"
input-change = "vm.mailField"
ng-model="vm.model.emails.menahelEmailField"
>
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="vm.buttonDisableValidation || formsToSign.$invalid"
class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</form>
Thanks for any help.
I've tailored your example with one input elements and made the fiddle and it is working without any
issues.
I guess the issue is with other input elements. Try to debug with {{formsToSign.$error}} to find the error
HTML
<div ng-controller="MyController as vm">
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail {{vm.isMailReqired}}</label>
<input ng-required="vm.isMailReqired" pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox" ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek" />
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="formsToSign.$invalid" class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</div>
</div>
</form>
<p>
<b>{{formsToSign.$error}}</b>
</p>
</div>
JS
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = [];
function MyController() {
var vm = this;
vm.isMailReqired = true;
}
$invalid
boolean
True if at least one containing control or form is invalid.
mail
()\[\]\.,;:\s#\']+(\.[^()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^()[\]\.,;:\s#\']+\.)+[^()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox"ng-disabled="vm.model.signAgreement"ng-model="vm.model.emails.beitEsek">

Want to use Angularjs validation instead of Browser validation

I have a form which holds two ng-forms where i am validating the input. I have two questions regarding my forms.
1) In the input Company I want to validate for the minlength, but my approach seems not to work. How can i solve this problem?
2) I want to use Angularjs validation with my error messages but the browser automatically shows "This input is invalid" AND Internet Explorer does not validate at all. Where is my fault? I already tried nonvalidate and ng-required but then my form does submit without validation.
Here is the plunkr link : Plunkr
Thanks in advance,
YB
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.billingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="addressForm" ng-submit="submit()">
<div ng-form="shippingForm">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Lieferadresse</label>
</h3>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="shippingAddress.salutation" class="form-control" ng-change="refreshBillingAddress()" ng-required="true">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted && shippingForm.salutation.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firsname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="shippingAddress.prename" ng-required="true" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.prename.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="shippingAddress.surname" required="" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.surname.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="shippingAddress.company" required="" ng-minlength="10" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.company.$error.required">Required</span>
<span ng-show="submitted && shippingForm.company.$error.minlength">Minlength = 10</span>
</div>
</div>
</div >
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Rechnungsadresse</label>
<div ng-click="setBillingAddress()" ng-show="changeBillingAddress === false" class="btn btn-default pull-right">Ändern</div>
<div ng-click="cancelBillingAddress()" ng-show="changeBillingAddress === true" class="btn btn-danger pull-right">Abbrechen</div>
</h3>
</div>
<div ng-show="changeBillingAddress == false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
</div>
<div ng-show="changeBillingAddress == true">
<div style="margin-top: 5px">
<div ng-form="billingForm">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="billingAddress.salutation" ng-required="changeBillingAddress == true" class="form-control">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="billingAddress.prename" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.prename.required" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="billingAddress.surname" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.surname.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="billingAddress.company" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.company.$error.required"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div style="padding-top: 1em" class="col-md-12">
<button ng-click="previousTab(0)" class="btn btn-default pull-left">Back</button>
<button type="submit" class="btn btn-default pull-right">Next</button>
</div>
</div>
</form>
</body>
</html>
Here is your plunker, i corrected some parts (until Rechnungsaddresse):
http://plnkr.co/edit/luVETXTVCf2PkNAKzK1Z?p=preview
I guess you can use <form name="addressForm"... or <div ng-form="addressForm"
but both seems to make problems.
submitted was never set, so i added it in the way i guess you intended

ngSubmit not getting submitted

I am pretty much beginner with AngularJS, and I am trying to submit a form, as follows:
<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController"> </div>
This is my searchForm.html:
<div class="container">
<div class="row">
<div class="col-md-14">
<div class="well">
<div class="col-md-9">
<form ng-submit="submit()" class="form-horizontal clearfix" role="form" >
<div class="form-group">
<label for="teamName" class="col-md-3 control-label">Team name</label>
<div class="col-md-9">
<input type="text" ng-model="myName" id="myName" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-0"></div>
<button ng-click="onFormReset()" class="btn btn-default">Reset</button>
<input type="submit" id="submit" class="btn btn-primary" value="Search"/>
</div>
</form>
{{teamName}}
</div>
</div>
</div>
UPDATE
Controller:
angular.module('MyApp')
.controller('MySearchFormController', ['$scope', function($scope){
$scope.submit = function (){
if ($scope.myName) {
alert($scope.myName);
$scope.teamName = this.teamName;
}
}
}]);
What is currently happening is the text is automatically appearing in the {{teamName}} field.
Instead, I would like to make it work only onSubmit(), namely clicking the Search button.
You can try like this :
function demo ($scope) {
$scope.submit = function () {
$scope.submitted = true;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p ng-if="submitted">{{ teamName }}</p>
</div>
BUT it is not optimal, as once you submitted one time, $scope.submitted is true and you will get the same problem, again.
SO, I would recommend you to not bind your {{ teamName }} to the same reference as the input :
function demo ($scope) {
$scope.submit = function () {
$scope.teamNameCopy = angular.copy($scope.teamName);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p>{{ teamNameCopy }}</p>
</div>
OK, the issue is resolved.
Unfortunately, that was an issue related to incorrectly closing html tags, and not

The angular controller shows the modal form is valid, when it's not

I have a form that's pops in a modal directive (bootstrap UI).
I have 2 input with html5 validation: "required".
In the controller I wanted to find out if the form is valid, then proceed to the server. After I ran into a problem with scopes (when I tried to reffer $scope.FormName.$valid), I found a solution by sending form name with the ng-click.
Then I saw that the controller code shows that the form is valid (even when the required field is empty).
How can I implement check if the form is valid before submitting it.
Here is my code:
form in html
<form name="EmailForm">
<div class="row">
<div class="col-md-1 lbl_hdr">
date:
</div>
<div class="col-md-1">
{{Curr_Date | date:'dd/MM/yyyy'}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-1 lbl_hdr">
from:
</div>
<div class="col-md-1">
<input type="email" required placeholder="email" />
<br />
<br />
</div>
</div>
<div class="row">
<div class="col-md-3 lbl_hdr">
message:
</div>
</div>
<div class="row">
<div class="col-md-1">
<textarea class="msg_text" required rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-9">
<button type="submit" ng-click="SendEmail(EmailForm)" class="btn btn-primary btn_padded_top">send</button>
<button type="button" class="btn btn-primary btn_padded_top pull-left" ng-click="$close();">cancel</button>
</div>
</div>
</div>
</div>
</form>
controller
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: '/js/app/templates/msg_modal.html',
controller: function ($scope) {
$scope.Curr_Date = new Date();
$scope.SendEmail = function (EmailForm) {
if (EmailForm.$valid) {
EmailService.sendEmail("sdsd").success(
function (data) {
});
}//if valid
};
},
size: size
});
};
"if (EmailForm.$valid)" = always true
I had the same problem and turns out that the form elements must have ng-model in order for the AngularJS validation to kick in.
So just add it to all elements and it should be all good, e.g.
<input type="email" required placeholder="email" ng-model="email" />
Try using ng-submit and sending EmailForm.$valid in the arguments.
<form name="EmailForm" ng-submit="SendEmail(EmailForm.$valid)">
<div class="row">
<div class="col-md-1 lbl_hdr">
date:
</div>
<div class="col-md-1">
{{Curr_Date | date:'dd/MM/yyyy'}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-1 lbl_hdr">
from:
</div>
<div class="col-md-1">
<input type="email" required placeholder="email" />
<br />
<br />
</div>
</div>
<div class="row">
<div class="col-md-3 lbl_hdr">
message:
</div>
</div>
<div class="row">
<div class="col-md-1">
<textarea class="msg_text" required rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-9">
<button type="submit" class="btn btn-primary btn_padded_top">send</button>
<button type="button" class="btn btn-primary btn_padded_top pull-left" ng-click="$close();">cancel</button>
</div>
</div>
</div>
</div>
</form>
Then:
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: '/js/app/templates/msg_modal.html',
controller: function ($scope) {
$scope.Curr_Date = new Date();
$scope.SendEmail = function (isValid) {
if (isValid) {
EmailService.sendEmail("sdsd").success(
function (data) {
});
}//if valid
};
},
size: size
});
};

Categories