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>
Related
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
Am creating a web application. It has a form with 5 mandatory input fields.It has 2 buttons. One is submit & another one is save for later.
When I click on submit, the form should validate all the mandatory fields & save the input given by the user. This is working fine for me.
When I click on "save for later", only the first input field should be mandatory. All other fields should be changed as optional. How to achieve this using angular js?
View
<form name="Form" ng-controller="testController">
<input name="input" type="text" id="txtName" ng-model="Name" class="form-control" required>
<select ng-model="state" ng-options="s for s in stateList" id="state" ng-change="stateOnChange()" class="form-control"></select>
<input name="input" type="text" id="txtstate" ng-model="pincode" class="form-control" required>
<input name="input" type="text" id="txtplace" ng-model="place" class="form-control" ng-required={{isRequired}}>
<button type="submit" class="btn btn-success" ng-submit="saveAction();">Save</button>
Angular Controller
$scope.isRequired = false;
$scope.stateOnChange = function () {
if ($scope.state == "TN") {
$scope.isRequired = true;
}
else {
$scope.isRequired = false;
}}
See ng-required.
The directive sets the required attribute on the element if the
Angular expression inside ngRequired evaluates to true.
Example below:
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.required = false;
}
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController as vm">
<form name="vm.form">
<label for="required">Toggle required:</label>
<input type="checkbox" ng-model="vm.required" id="required" />
<br>
<label for="input">This input must be filled if `required` is true:</label>
<input type="text" ng-model="model" id="input" name="input" ng-required="vm.required" />
<br>
<p>required status: {{vm.required}}</p>
<p>form error: {{vm.form.input.$error}}</p>
</form>
</body>
</html>
This is my Fiddle.
http://jsfiddle.net/0c5p38dt/1/
In the above fiddle use ng-model in textfield and add save button
<input type="text" ng-model="eachItem.value"/>
<input type="button" value="save" ng-click="save()"/>
and i write code in js file :-
$scope.save=function(){
console.log($scope.data);
};
In the above code first i click add button when i enter data in first textfield(name) that will also effect on second textfield(name). I want to save the data . So how to differentiate these textboxes.
you should use a 'name' attribute in your input fields with angular
$index
on ng-repeat.
in your Fiddle:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="eachItem in data">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
<label>{{eachItem.label}}</label>
<input type="text" name="eachItem.label[$index]" />
</div>
</div>
</div>
The result would be like:
<input type="text" name="email[1]">
<input type="text" name="email[2]">
<input type="text" name="email[3]">
<input type="text" name="name[1]">
<input type="text" name="name[2]">
I'm not completely sure what you want, but I don't think you want the <input> in an ng-repeat, maybe what you want is in your .html:
<div ng-app>
<div ng-controller="Ctrl">
<label>Name</label>
<input type="text"ng-model="item.name"/>
<label>Email</label>
<input type="text"ng-model="item.email"/>
<input type="button" value="add" ng-click="addFields(item)"/>
<div ng-repeat="item in data">
<div ng-bind="item.name"></div>
<div ng-bind="item.email"></div>
</div>
</div>
</div>
and in your .js:
function Ctrl($scope) {
$scope.data=[];
$scope.addFields = function (item) {
$scope.data.push(item);
};
}
This will give you the inputs once and then keep track (and display) the data from the inputs
I have the following code, which shows the a.btn anchor if both inputs have values and inputURL is a valid URL. Works fine but I want to hide the button again on click, how do I do this, do I reset the form or actually hide the button on click?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
What I've done before is create a scope variable in your controller:
$scope.formSubmitted = false;
Then in your saveToList function set $scope.formSubmitted to true. From here you have a few options. If you're "Post" button is an actual button then you could set the disabled attribute. You could also check if formSubmitted is true inside your saveToList function and if it is true you don't continue. Or you can change your ng-show to be:
ng-show="myForm.$valid && !formSubmitted"
you can do something like this:
define another $scope.someToggle variable, and assign it true, then at the ng-show of the button add it like ng-show="myForm.$valid && someToggle". then at the end (or in callback) of saveToList($event) function, set $scope.someToggle to false.
also you can put this on both inputs: ng-change = "someToggle = true" so whenever they change(after the save button has been clicked) you'd be able to bring it back...
HTML
<body ng-app="myApp">
<div ng-controller="formCtrl">
<form name="myForm" class row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
</div>
</body>
controller
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.saveToList = function() {
$scope.mvName = '';
$scope.mvUrl = '';
}
});
Alternative
with scope variable without invalidating form
Post
app.controller('formCtrl', function($scope) {
$scope.logicalExp = "||";
$scope.formSubmitted = true;
$scope.saveToList = function() {
$scope.logicalExp = "&&";
$scope.formSubmitted = true;
}
});
the problem with this is, user needs to invalidate the form by himself by removing entered value then hyperlink will be hidden-ed.
I want to show only clicked event field, but it was showing multiple views on each click event.
'use strict';
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
$scope.fieldCollectionSingle = [];
$scope.selectSingle = function (fieldkey, field) {
$scope.showSingle_Fieldsettings = true;
};
$scope.showSingle = function (fieldkey, field, index) {
return angular.equals(shownSingle, field, index);
};
$scope.removeName = function (fieldkey) {
$scope.fieldCollectionSingle.splice(fieldkey, 1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="fieldCollectionSingle.push([])">Single Line Text</button><br/>
<fieldset ng-click="selectSingle()" class="ui-state-default" ng-repeat="(fieldkey, field) in
fieldCollectionSingle">
<label>{{field.single}}</label>
<input type="text" id = "abc{{fieldkey}}" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div ng-repeat="(fieldkey, field) in fieldCollectionSingle" class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label><br/>
<fieldset>
<input ng-model="field.single" ng-click="setLabel(fieldkey)" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
[1]: http://jsfiddle.net/vijjusena/17cc74g0/2/ [this is mycode jsfiddle]
At-last I understood your requirement and edited you JSFiddle to create exactly what you wanted. I have changed few things, but I hope you can understand all of them. If something gets you stuck, ask me.
Important: You will have to click on "Default title" text to show the other form to change/update the title.
Here is the JSFiddle. Good luck, have fun!
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="addNewField()">Single Line Text</button>
<fieldset class="ui-state-default" ng-repeat="(fieldkey, field) in fieldCollectionSingle">
<label ng-click="selectSingle(field)">{{ field.label }} : </label>
<input type="text" ng-model="field.value" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label>
<fieldset>
<input ng-model="selectedField.label" class="fieldLabel">
</fieldset>
</div>
</div>
</div>