Ng-model vs ngModel - breaks form
New to angular, new to life:
I have a small email.
It works:
<form method="post" name="form" role="form" ng-controller="contactForm" ng-submit="form.$valid && sendMessage(input)" novalidate class="form-horizontal">
<p ng-show="success"><b>We received your message</b></p>
<p ng-show="error">Something wrong happened!, please try again.</p>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" ng-model="input.name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" ng-model="input.email" required><br>
<label for="messsage">Message:</label><br>
<textarea id="messsage" name="message" ng-model="input.message" ngMaxlength='2000' required></textarea><br>
<button type="submit" name="submit" ng-disabled="error" value="submit">Submit</button>
</form>
This does not work:
<form method="post" name="form" role="form" ng-controller="contactForm" ng-submit="form.$valid && sendMessage(input)" novalidate class="form-horizontal">
<p ng-show="success"><b>We received your message</b></p>
<p ng-show="error">Something wrong happened!, please try again.</p>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" ngModel="input.name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" ngModel="input.email" required><br>
<label for="messsage">Message:</label><br>
<textarea id="messsage" name="message" ngModel="input.message" ngMaxlength='2000' required></textarea><br>
<button type="submit" name="submit" ng-disabled="error" value="submit">Submit</button>
</form>
for 2 inputs and a textbox, if I use 'ng-model' sent by email, but when the page is loaded, the form is loaded invalid. If I use 'ngModel' the form is loaded cleanly, but no email is sent.
here:
app.controller("contactForm", ['$scope', '$http', function($scope, $http) {
$scope.success = false;
$scope.error = false;
$scope.sendMessage = function( input ) {
$http({
method: 'POST',
url: 'processForm.php',
data: input,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success( function(data) {
if ( data.success ) {
$scope.success = true;
$scope.input.name="";
$scope.input.email="";
$scope.input.message="";
} else {
$scope.error = true;
}
} );
}
You can see it here: http://smartestdiner.com/Bethel/indexx.html#/contact Warning: There is some annoying red background
.ng-invalid{
background-color:red;
}
}]);
What we know this download is invalid.
source to share
The annoying red background is the form, since you have a general rule set .ng-invalid
, the class will be set on the form as well. You will need to make it more specific to inputs and controls on the form.
Example:
input.ng-invalid,
textarea.ng-invalid {
background-color:red;
}
Or just a reset rule for form.ng-invalid
To add, nothing is called ngModel
it ng-model
. using the old one, it does nothing except add the dummy element attribute, it has no effect. This is angular's method of naming a directive, since html is case insensitive, one way angular is to identify a directive from an attribute or element name (based on constraint). It converts it to camelCasing to evaluate and handle the appropriate directives (or directive attribute bindings). If you don't have a pointer ng-model
, and if the form or control doesn't have an attribute novalidate
, then HTML5 browser validation is triggered, that's what you see as a mismatch. Using the HTML5 novalidate attribute , ensure that no inline validation exists on the form.
source to share
- ng-model is when you write the view (html part).
- ngModel is used when you write a custom directive. It is placed in the "require:" parameter so that you can access variables such as ngModel. $ modelValue
ngModel. $ modelValue will have the last content that was entered by the user in real time. So it can be used for validation, etc.
View code: -
<!doctype html>
<html ng-app="plankton">
<head>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/scripts/emailing/emailing.directive.js"></script>
</head>
<body ng-controller="EmailingCtrl">
<div>
<label>Enter Email: </label>
<emailing id="person_email" ng-model="email_entered"></emailing>
</div>
</body>
</html>
Custom Directive : -
(function() {
'use strict';
angular.module('plankton', [])
.directive('emailing', function emailing(){
return {
restrict: 'AE',
replace: 'true',
template: '<input type="text"></input>',
controllerAs: 'vm',
scope: {},
require: "ngModel",
link: function(scope, elem, attrs, ngModel){
console.log(ngModel);
scope.$watch(function(){ return ngModel.$modelValue;
}, function(modelValue){
console.log(modelValue);//awesome! gets live data entered into the input text box
});
},
};
})
.controller('EmailingCtrl', function($scope){
var vm = this;
});
})();
source to share