My text editor model value is not binding which is of type textarea as well, and I have html formatted text in it. When I call my save method, this editor's model variable is null. I am not able to understand why this is happening as model with simple input type text is working fine, what could be the issue with the text editors model. Following is my code kindly have a look at this, may be I am doing something wrong.
<div class="col-md-12">
<div class="form-group">
<input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-bind-html="TemplateDescription" placeholder="Enter Agreement Template ..." ></textarea>
</div>
</div>
And this is my controller code:
$scope.Template = {
Name: $scope.TemplateName,
Description: $scope.TemplateDescription,
};
var promisePost = templateService.post($scope.Template);
promisePost.then(function (pl) {
//success message
}, function (err) {
//error message
});
You should use ng-model and bind it directly to Template.Description
HTML
<div ng-app>
<div ng-controller="sampleCtrl">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-model="Template.Description" placeholder="Enter Agreement Template ..."></textarea>
{{Template.Description}}
</div>
</div>
Controller
function sampleCtrl($scope) {
$scope.Template = {
Description: ''
};
}
See this fiddle for your reference
yes use ng-model for binding
html as
div class="form-group">
<input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription"
ng-bind-html="TemplateDescription"
ng-model='TemplateDescription' // add ng-model
placeholder="Enter Agreement Template ..."></textarea>
</div>
here is the plnkr link
Use ng-model instead of ng-bing-html
<div class="col-md-12">
<div class="form-group">
<input type="text" ng-model="TemplateName"
class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40"
class="wysihtml5 wysihtml5-min form-control" id="templateDescription"
ng-model="TemplateDescription"
placeholder="Enter Agreement Template ..." ></textarea>
</div>
</div>
Check my pen http://codepen.io/keephacking/pen/kXVjOX?editors=1010
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
Hello I am beginner of Angularjs and I want to build dynamic validations.Here is my code shortened as well as possible.
JS
$scope.inputValidates = [
{ 'name':'name',
'validate':'required',
},
{ 'name':'email',
'validate':'type = email',
}]
HTML
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" {{item.validate}}>
</div>
I want this input result as
<input name=name ng-model="vm.useraccount[vitem.name] required>
<input name=name ng-model="vm.useraccount[vitem.name] type = email>
Thanks for taking time for this.
Use ng-required:
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" ng-required="item.validate">
</div>
By the way, I see you assigned inputValidates to your $scope. So you should be accessing it in your view by inputValidates, not vm.inputValidates.
Sample is HERE
Sample contains both required and pattern validation applied on textbox rendered using ng-repeat and use ng-switch based on your validation type
<div ng-repeat="field in fields">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left" ng-switch="field.validationType">
{{field.name}} :
<div ng-switch-when="required">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Field Required!</span>
</div>
<div ng-switch-when="email">
<input type="email" id="input{{$index}}" name="input{{$index}}" ng-model="field.value" ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/">
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid email!</span>
</div>
</div>
</div>
</div>
I have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.
Here is the HTML (my controller is defined in the routing):
<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
({{70 - newItem.title.$viewValue.length}} Characters Remaining)
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" data-ng-click="newItem">Submit</button>
</div>
</div>
</fieldset>
</form>
Here is my controller:
appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
var itemEntry = new appItems;
console.log(itemEntry);
$scope.types = [];
appTypes.query(function (typedata) {
var itemTypes = typedata.value;
// Foreach type, push values into types array
angular.forEach(itemTypes, function (typevalue, typekey) {
$scope.types.push({
label: typevalue.Title,
value: typevalue.Title,
});
})
});
$scope.createItem = function () {
itemEntry.Title = $scope.itemtitle;
itemEntry.$save();
}
$scope.cancel = function () {
}
}]);
UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:
I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:
<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>
<div>
<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
</div>
</div>
<div class="col-lg-10 col-lg-offset-2">
<!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.
Do both buttons exhibit this behavior or just the Submit button?
The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.
My view page :
$scope.profileupdate = function(profiledata) {
var spinner = new Spinner(opts).spin(target);
console.log("Firstname " + $scope.firstName + "Lastname " + $scope.lastName );
spinner.stop();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="profileform" class="form-horizontal" role="form">
<div class="form-group">
<label for="firstName" class="control-label col-md-2 col-md-offset-1">First Name</label>
<div class="col-md-6">
<input type="text" class="form-control" ng-modal="profile.firstName" name="firstName" id="firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastName" class="control-label col-md-2 col-md-offset-1">Last Name</label>
<div class="col-md-6">
<input type="text" class="form-control" ng-modal="profile.lastName" id="lastName" name="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-12">
<input id="btn-signup" type="button" ng-click="profileupdate(profile)" class="btn btn-primary" />
</div>
</div>
</form>
I need to get the text box value from view to controller. Bet i cant get value in the controller. is there any other better way to get the data using angular JS.
You want ng-model, not ng-modal.
If you use ng-model then you can get it that way
see doc here
its simple
use like
alert($scope.firstName) ;
you passed the form data to controller
console.log(profiledata.firstName);
if you do not pass the form value to controller get data directly
console.log($scope.profile.firstName);