I've optional textfields in a form, once submitted and they are empty then they end up as undefined in my database.
I'm trying to find a quick way so I don't have to go each field and check if it's undefined and set an empty space "" to it, because I've several fields and several forms.
this.$scope.data = {};
submit: function() {
var formData = new FormData();
formData.append("name", this.$scope.data.name);
formData.append("title", this.$scope.data.title);
formData.append("company", this.$scope.data.company);
Related html
<label class="control-label col-md-3">Speaker Name</label>
<div class="col-md-9">
<input type="text" placeholder="" class="form-control" ng-model="data.name" required />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-9">
<input type="text" placeholder="" class="form-control" ng-model="data.title" />
Have you tried
formData.append("name", this.$scope.data.name || 'default');
Related
I'm new at Angularjs and my question is how to display an error message when the password doesn't match with confirm password?
Can someone help me, this is not very difficult but I'm still learning to programme.
Thanks to everyone!
I have html code:
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
</div>
<div class="form-group">
<label for="password">Confirm Password</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm" />
</div>
<p ng-show="(userForm.passwordConfirm != '') && (userForm.password != userForm.passwordConfirm)">Passwords don't match</p>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</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">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And angular function:
$scope.saveItem = function(){
console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.activeItem.username,
//password: $scope.activeItem.password,
name: $scope.activeItem.name,
id: $scope.activeItem.id
};
if($scope.activeItem.passwordString != ''){
if($scope.activeItem.passwordString == $scope.activeItem.passwordConfirm){
objectToSave.password = $scope.activeItem.passwordString;
} else {
console.log('Confirm password error');
}
}
You'll want to keep different Id's for the two password fields, also take a look at your model bindings:
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
<input type="text" class="form-control" id="passwordConfirm" ng-model="activeItem.passwordConfirm" />
You can just reference the items that are bound with ng-model within an ng-if/ng-show, and then you shouldn't need any custom logic on the back-end.
<p ng-show="(activeItem.passwordString && activeItem.passwordConfirm) && activeItem.passwordString
!== activeItem.passwordConfirm ">Passwords don't match</p>
Also, you'll probably want to use '!==' over '!=' since you're just comparing two strings, as it's more strict of a comparison.
Edit: one thing to note, with this direction you'll still probably want to do error checking in the save function, but this should handle displaying the error message without any issues.
Remember the operator for 'not equal' is "!==", with that you will be able to make it!
I'm trying to bind my Controller's object values to inputs using ng-model, if I add it ng-repeat it is binding data, but if i call it directly it is not binding data to inputs. Thank you :)
Angular Controller
SMSApp.controller('studentUpdateController', function ($scope, $routeParams, GetStudentService) {
$scope.stuid = $routeParams.STUDENTID != null ? $routeParams.STUDENTID : 0;
GetStudentService.getbyId($scope.stuid).then(function (result) {
$scope.obj = JSON.parse(result);
$scope.obj = $scope.obj.Table;
console.log($scope.obj);
});
});
Console Log's
HTML Code
<div class="col-md-4 form-group">
<label>First Name</label>
<input type="text" class="form-control" ng-model="obj.FIRSTNAME" placeholder="First Name" required />
</div>
<div class="col-md-4 form-group">
<label>Middle Name</label>
<input type="text" class="form-control" ng-model="obj.MIDDLENAME" value="" placeholder="Middle Name" required />
</div>
It is because your obj is an array. If you do not want to use ng-repeat in other words if you are sure you will have only 1 item in your array you can try the following
<div class="col-md-4 form-group">
<label>First Name</label>
<input type="text" class="form-control" ng-model="obj[0].FIRSTNAME" placeholder="First Name" required />
</div>
<div class="col-md-4 form-group">
<label>Middle Name</label>
<input type="text" class="form-control" ng-model="obj[0].MIDDLENAME" value="" placeholder="Middle Name" required />
</div>
I am trying to get the input value for a form field, but when I use the code below, the value displays as undefined.
Any idea what I'm doing wrong here?
.controller('ContactFormCtrl',
function (Contacts) {
var contactForm = this;
contactForm.contacts = Contacts;
contactForm.contact = {};
var mail=contactForm.contact.email;
contactForm.onchange = function () {console.log(mail);};
});
<div class="col-sm-6 form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control" ng-change="contactForm.onchange()" ng-model-options="{ updateOn: 'blur' }" />
</div>
Update the controller as :
.controller('ContactFormCtrl',
function (Contacts) {
var contactForm = this;
contactForm.contacts = Contacts;
contactForm.contact = {};
contactForm.contact.email="";
var mail=contactForm.contact.email;
contactForm.onchange = function () {console.log(mail);};
});
Currently, there is no email property with "contactForm.contact" object. So you need to initialize the email property and it will not give you undefined error.
As you are using controllerAs syntax then you should use alias there contactForm
<div ng-controller="ContactFormCtrl as contactForm">
<div class="col-sm-6 form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control" ng-change="contactForm.onchange()" ng-model-options="{ updateOn: 'blur' }" />
</div>
</div>
And the reason it is undefined is you have reinitialized controller contact object after contactForm.contacts = Contacts; which overrides the value of email.
Update
As discussed in chat you want to show email on blur as well as you want to call onchange function on email validate, for that you should have to use combination of directive ng-change with ng-blur then you should get rid off ng-model-options which don't suits your requirement.
Markup
<div ng-controller="ContactFormCtrl as contactForm">
<form name="myForm">
<div class="col-sm-6 form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control"
ng-change="myForm.email.$valid && contactForm.onchange()" ng-blur="contactForm.onchange()"/>
</div>
</form>
</div>
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo
I'm setting some form values on an angular form and need to have the validation trigger/set the field to dirty programmatically. The current bug requires the user to actually interact with the form field to trigger the "required" validation and to have it turn green.
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
var scope = angular.element($("#PhotoUploadForm")).scope();
scope.$apply(function(){
scope.user.firstName = response.first_name;
scope.user.lastName = response.last_name;
scope.user.email = response.email;
});
});
And here is the html
<form no-validate id="PhotoUploadForm" name='form' action="/uploaded" enctype="multipart/form-data" method="POST" role="form" ng-controller="Controller">
<div class="col-md-5">
<div class="form-group">
<label class="control-label" for="firstName" >First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" ng-model="user.firstName" required />
</div>
<div class="form-group">
<label class="control-label" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" ng-model="user.lastName" required />
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" ng-model="user.email" required />
</div>
</div>
</form>
You can do it this way:
angular.element('#PhotoUploadForm').scope().user.firstName.$dirty = true
Let me know if it helps.