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>
Related
I have an angular directive to facilitate the adding of bootstrap classes at runtime to streamline the need to apply "form-group", "control-label" and "form-control". This works perfectly as long as I don't try to include multiple levels at once, meaning that I cannot seem to make this work to include multiple divs in "form-group. I have attached the code, raw HTML and processed HTML for review to see if someone might have some insight into how I might modify to make this tool meaningful.
Directive:
(function () {
"use strict";
angular.module("ppac")
.directive("formfix", formfix);
var addClasses = function (element) {
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "checkbox" && type !== "radio") {
input.classList.add("form-control");
}
var label = element.querySelector("label");
label.classList.add("control-label");
element.classList.add("form-group");
};
function formfix() {
return {
restrict: "A",
link: function (scope, element) {
addClasses(element[0]);
}
}
}
})();
HTML Form:
<form name="contactForm" ng-submit="model.submit()" novalidate>
<div class="form-horizontal">
<div formfix>
<label for="firstName" class="col-md-2">First Name</label>
<div class="col-md-3">
<input type="text" name="firstName" id="firstName" ng-model="model.contact.firstName" />
</div>
<label for="lastName" class="col-md-2">Last Name</label>
<div class="col-md-3">
<input type="text" name="lastName" id="lastName" ng-model="model.contact.lastName" />
</div>
</div>
</div>
</form>
Processed HTML:
<form name="contactForm" ng-submit="model.submit()" novalidate="" class="ng-pristine ng-valid">
<div class="form-horizontal">
<div formfix="" class="form-group">
<label for="firstName" class="col-md-2 control-label">First Name</label>
<div class="col-md-3">
<input type="text" name="firstName" id="firstName" ng-model="model.contact.firstName" class="ng-pristine ng-valid form-control ng-empty ng-touched">
</div>
<label for="lastName" class="col-md-2">Last Name</label>
<div class="col-md-3">
<input type="text" name="lastName" id="lastName" ng-model="model.contact.lastName" class="ng-pristine ng-untouched ng-valid ng-empty">
</div>
</div>
</div>
</form>
You can use ng-class to add class dynamically as the document says
The ngClass directive allows you to dynamically set CSS classes on an
HTML element by databinding an expression that represents all classes
to be added.
Reference
https://docs.angularjs.org/api/ng/directive/ngClass
I want to add error message, something like this:
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
<div ng-message="required">Here is some message</div>
</div>
</md-input-container>
But want to call rendering from controller:
callMessage() {
// How can I implement this?
}
I assume you are not using controller as syntax, so you will have to define a function on the $scope object within your controller:
function YourController($scope,...){
$scope.callMessage = function(){
//you can access your form using $scope.userForm
return "yourString";
}
}
Your markup would change as follows:
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
<div ng-message="required">{{callMessage()}}</div>
</div>
The important part is that you define your function on the $scope so that Angular actually can bind the {{callMessage()}} part in the markup to your function.
You may do,
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="vm.callMessage(userForm.lastName.$dirty)">
<div ng-message="required">{{vm.myMessage}}</div>
</div>
And from controller
callMessage(isDirty) {
// Your conditional message with respect to "isDirty" parameter
isDirty ? this.myMessage = 'Dirty Message' : false;
return isDirty;
}
You may call directly $error in your controller after you have set up form.
View
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
<div ng-message="required">{{errorMsg}}</div>
</div>
</md-input-container>
Controller
var isError = $scope.userForm.lastName.$error;
if (isError) {
$scope.errorMsg = 'Hey, this is error message';
}
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');
I'd like to use ng-model on input that receive a value of an other input ...
My code doesn't work and I don't understand why, is that possible to set ng-model to an input with Angular values?
My code
var BottomApp = angular.module('BottomApp', []);
BottomApp.controller('SeoArticle', ['$scope', function($scope) {
$scope.seoTitle = document.getElementById('title').value;
$scope.createSeoUrl = function(string){
var string;
string = string.replace(/'+/g, '');
string = string.replace(/"+/g, '');
return string.replace(/\s+/g, '-');
};
}]);
<div ng-controller="SeoArticle">
<input type="text" id="title" name="article[title]" class="form-control" placeholder="title" ng-model="seoTitle">
<input type="text" name="article[seo_title]" value="{{seoTitle2}}">
<input type="text" name="article[seo_url]" value="{{seoUrl2}}">
<div class="ui-block-title"><h5>{{seoTitle}}</h5></div>
<input type="text" id="title" class="form-control" placeholder="title" value="{{seoTitle}}" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" value="{{createSeoUrl(seoTitle)}}" ng-model="seoUrl2">
<div class="panel">
<div class="seo-overview">
<p class="seo-overview-title">{{seoTitle}}</p>
<p class="seo-overview-url">{{createSeoUrl(seoTitle)}}</p>
</div>
</div>
</div>
:
Here's a working Plunker.
I have added the ng-app call to the body tag
<body ng-app="BottomApp">
and removed the string variable declaration from createSeoUrl.
Edit: I don't think you can do it within the DOM. You should use a watcher. See the updated Plunker.
$scope.$watch("seoTitle", function(newValue) {
$scope.seoTitle2 = newValue;
$scope.seoUrl2 = $scope.createSeoUrl(newValue);
})
<input type="text" id="title" class="form-control" placeholder="title" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" ng-model="seoUrl2">
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.