We Keep Coding

AngularJS with ng-pattern in form does not send invalid field to server

I want to validate a text input in form, so the submit of the form could not be done until the input match a regular expression. But when I type a wrong field value and I clik submit the form is submitted but the input value is not sent to the server. I want the same behaviour as with HTML5 required Attribute. This is my code:
<div class="row">
<label class="col-sm-2 label-on-left">APN</label>
<div class="col-sm-7">
<div class="form-group label-floating">
<label class="control-label"></label>
<input class="form-control" type="text" name="apn" ng-model="Configure3gCtrl.configure3g.apn" ng-pattern="/^[a-zA-Z0-9-.]*$/" required/>
</div>
</div>
</div>

As i said in the comment [value not sent because when you pass the input with incorrect pattern the ng-model is undefined].
But we can use the form validation here as sample if our ng-model are invalid the form will disabled.
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) {
$scope.submit = function() {
console.log($scope.object)
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="form">
<label class="col-sm-2 label-on-left">APN</label>
<input type="text" name="apn" ng-model="object.apn" ng-pattern="/^[a-zA-Z0-9-.]*$/" required />
<button ng-click="submit()" ng-disabled="form.$invalid">submit</button>
</form>
</div>

Ideally, you should not send the invalid value to server, So you should disable\hide your submit button, but if you really require sending the invalid value as well to server, then from angularjs 1.3+ you have ng-model-options (Read Doc) directive which can help you.
Simply mark your text type input as ng-model-options="{allowInvalid: true }", It will persist the invalid values as well.
See Demo:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.submitt = function() {
alert($scope.Configure3gCtrl.configure3g.apn);
}
$scope.Configure3gCtrl = {
configure3g: {
apn: ""
}
}
});
<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="frm" ng-submit="submitt()" class="row">
<label class="col-sm-2 label-on-left">APN</label>
<div class="col-sm-7">
<div class="form-group label-floating">
<label class="control-label"></label>
<input class="form-control" type="text" name="apn"
ng-model="Configure3gCtrl.configure3g.apn"
ng-model-options="{allowInvalid: true }"
ng-pattern="/^[a-zA-Z0-9-.]*$/" required/>
</div>
</div>
<input type="submit" value="submit" type="submit" />
</form>
</div>
also, Test with removing ng-model-options="{allowInvalid: '$inherit' }" from above code snippet then ng-model will be undefined, because it is invalid.

Custom password validation directive not applying

I'm working with AngularJS and I want to make a password confirmation field to check if both entries match. In order to do that, I'm using a custom directive from this tutorial: http://odetocode.com/blogs/scott/archive/2014/10/13/confirm-password-validation-in-angularjs.aspx.
For some reason, the matching checking doesn't give any result. When I enter different passwords, it still sees the fields as valid. I think I'm missing something about the usage of custom directives in AngularJS, but it's a bit confusing because I'm litterally taking the exact same code as in the tutorial.
I also checked related questions here on SO, but no luck either.
HTML:
<div ng-app="myApp">
<h1>Register!</h1>
<form name="registrationForm" novalidate>
<div class="form-group">
<label>User Name</label>
<input type="text" name="username" class="form-control" ng-model="registration.user.username" required />
<p ng-show="registrationForm.username.$error.required">Required<br/><br/></p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="registration.user.password" required />
<p ng-show="registrationForm.password.$error.required">Required<br/><br/></p>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirmPassword" class="form-control" ng-model="registration.user.confirmPassword" required compare-to="registration.user.password" />
<p ng-show="registrationForm.confirmPassword.$error.required">Required<br/><br/></p>
<p ng-show="registrationForm.confirmPassword.$error.compareTo">Passwords must match !</p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Register!</button>
</div>
</form>
</div>
JS:
angular.module('myApp', [])
.directive('compareTo', function(){
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function(scope, element, attributes, ngModel) {
ngModel.$validators.compareTo = function(modelValue) {
return modelValue == scope.otherModelValue;
};
scope.$watch("otherModelValue", function() {
ngModel.$validate();
});
}
};
})
JSFiddle showing the problem: http://jsfiddle.net/ptb01eak/
Working Plunkr from the tutorial: http://plnkr.co/edit/FipgiTUaaymm5Mk6HIfn?p=preview
Thank you for your help!

The problem comes from your AngularJS version, I updated it in the jsfiddle to : AngularJS 1.5.6 (CDN link) and it works (new jsfiddle).

JavaScript Focus not working

Javascript focus is not working in my code.
HTML
<div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px">
<input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit Unit" />
</div>
Javascript
var textbox = document.getElementById('edtunt');
//document.getElementById("edtunt").focus();
document.getElementById("edtunt").focus();
$scope.Unit = unit.name;

use tabindex="0" for making div focusable

Your code works:
document.getElementById('edtunt').focus();
<div class="col-md-6">
<input
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
Also, within your AngularJS application, you can add the autofocus attribute:
angular
.module('MyApp', [])
.controller('MyController', function() {});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="col-md-6">
<input
autofocus
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
</div>

Indeed your code should work. Just a question, why you do:
var textbox = document.getElementById('edtunt');
document.getElementById("edtunt").focus();
Instead of:
var textbox = document.getElementById('edtunt');
textbox.focus();
What worked for me is making sure the whole document is loaded before setting focus. A very easy way to do that is using this copy paste JQuery code:
$( document ).ready(function() {
var textbox = document.getElementById('edtunt');
textbox.focus();
});
Hope this might help!

POST is not getting current values from angular

In my view there are two forms (one is visible, second one is hidden). First one as action calls submit1() function in controller, that in turn will invoke document.getElementById('form2').submit(); Second form action has method POST that directly calls php.
Now I cannot get why if my submit1() looks like this:
function submit1()
{
// doesnt matter
$scope.first = 'this is my string'; // here I'm modifying variable from $scope1 that is directly in form2
document.getElementById('form2').submit(); // problem here!
// doesn't matter
}
It does not work as expected.
Basically, when form2 is sent, it still has a default value (not changed one).
Looks like it would not really change variable outside the scope of function submit1() or like POST would not accept this change. Anyone can tell me why it is like that?
Moreover I was previously using $http post method instead document.getElement().submit() and it works fine. So this seems to be weird.
I would appreciate any help in this matter.
Thank you!
Edit1: (adding more code to properly define what is a problem):
view:
<div class="container">
<div ng-hide="true" >
<form action="./order2.php" id="form2" method="POST">
<input type="text" name="username" value="{{username}}"/>
<input type="text" name="phone" value="{{phone}}"/>
<input type="text" name="address" value="{{address}}"/>
<input type="text" name="price" value="{{totalPrice}}"/>
<input type="text" name="email" value="{{email}}"/>
<input type="text" name="message" value="{{text}}"/>
<input type="submit"/>
</form>
</div>
<form novalidate id="contact-form" name="contactForm">
<a class="btn btn-success" ng-click="submit1()" href>
<i class="fa fa-check-circle-o fa-lg"></i>
{{ 'ID_ORDER_BUTTON' | translate:$root.currentLang }}
</a>
</form>
</div>
Controller:
Appcontrollers.controller('controller1', function($scope, $http, $rootScope, $timeout, $routeParams, $window, $location, databaseService, translationService, cartService, leatherService, $location) {
$scope.text="";
$scope.email="11111#2222.com";
$scope.price=0;
$scope.address= "add";
$scope.phone="1213131";
$scope.username="usera";
$scope.submit1 = function() {
$scope.price=999999999; // this looks like doesn't have effect.
document.getElementById('form2').submit();
}
}

Not displaying Array Object Values with Angular

I have the following application and have been having issues on getting the application to display the object values beside the form. Its showing the divs and styles correctly but no values. Anyone see why that could be?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Employee Directory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/application.css">
<script src="js/angular.min.js"></script>
<script src="js/application.js"></script>
<script src="js/dataService.js"></script>
</head>
<body ng-app="MyApp">
<div class="container">
<h1>Employee Directory</h1>
<hr>
<div id="form-container">
<h3>Add an Entry</h2>
<form role="form">
<div class="form-group">
<label for="name">Employee:</label>
<input type="text" name="name" class="form-control" ng-model="employeeName">
</div>
<div class="form-group">
<label for="name">Street:</label>
<input type="text" name="street" class="form-control" ng-model="employeeStreet">
</div>
<div class="form-group">
<label for="name">City:</label>
<input type="text" name="name" class="form-control" ng-model="employeeCity">
</div>
<div class="form-group">
<label for="name">State:</label>
<input type="text" name="state" class="form-control" ng-model="employeeState">
</div>
<div class="form-group">
<label for="name">Zip Code:</label>
<input type="text" name="zipcode" class="form-control" ng-model="employeeZipCode">
</div>
<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
</form>
</div>
<div id="employee-list">
<div ng-repeat"employee in employeesArray" class="employee">
<div class="employee-header">
<span class="glyphicon glyphicon-user"></span><strong>{{employee.employeeName}}</strong><button ng-click="deleteName()" class="cancel">X</button>
</div>
<div class="employee-footer">
<address>
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
</address>
</div>
</div>
</div>
</div>
</body>
</html>
application.js
angular.module("MyApp", []).controller("DBController", function ($scope, dataService) {
$scope.employeeName;
$scope.employeeStreet;
$scope.employeeCity;
$scope.employeeState;
$scope.employeeZipCode;
$scope.employeesArray = dataService.getEmployees();
$scope.addEmployee = function() {
dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
}
$scope.deleteEmployee = function(deletedEmployee) {
dataService.removeEmployee(deletedEmployee);
} });
dataService.js
angular.module("MyApp").service("dataService", function() {
var employeesArray = [{employeeName:'Joe Smith', employeeStreet:'12345 West 123nd Terrace', employeeCity:'Canton', employeeState:'Ohio', employeeZipCode:'12345'}];
this.getEmployees = function() {
return employeesArray;
}
this.addEmployee = function(employee) {
employeesArray.push(employee);
}
this.removeEmployee = function(employee) {
employeesArray.splice(employeesArray.indexOf(), 1);
}
});

Couple of things wrong in your code. First:
<body ng-app="MyApp">
bootstraps your view with the MyApp module, but you have no controller declarations, so your controller code isn't running. Change it to:
<body ng-app="MyApp" ng-controller="DBController">
Second,
<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
is wrong, because your controller doesn't declare a scope function called addName. It's addEmployee, so the correct code is:
<input type="submit" ng-click="addEmployee()" class="btn btn-default btn-primary" value="Add Entry">
Finally,
<div ng-repeat"employee in employeesArray" class="employee">
is missing an equals sign. The correct code is:
<div ng-repeat="employee in employeesArray" class="employee">
With those three things corrected, you'll start to see some results (check out this plunk to see them right away).
Edit:
The next problems in your code are here:
dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
Because you're manipulating the employeesArray by calling push and then calling addEmployee with the result of the push. This is a problem, because your getEmployees call returns a reference to the array, and what you are manipulating in the push call is in fact the internal state of DataService. Hence the duplicate effect. Instead, if you do this:
var employee = {
"employeeName": $scope.employeeName,
"employeeStreet": $scope.employeeStreet,
"employeeCity": $scope.employeeCity,
"employeeState": $scope.employeeState,
"employeeZipCode": $scope.employeeZipCode
};
dataService.addEmployee(employee);
you'll rid yourself of the duplicate record. Finally, your bindings in the ng-repeat look like this:
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
note that the last two bindings don't reference the employee in your ng-repeat, but instead refer to the ng-models in the parent scope. Change that to:
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}