In my controller I update a textarea with $http. It works as expected. But now I would like to bind message1, and message2 to from model, how to do it ?
RESULT:
This is {{message1}} in 1st line
This is {{message2}} in last line
in CONTROLLER:
$scope.myTextArea = response.data;
in HTML:
<form name="myform">
<p><input type="text" ng-model="message1"/>Message1</p>
<p><input type="text" ng-model="message2"/>Message2</p>
</form>
<p>
<textarea type="text" id="textarea" model="myTextArea" cols="80" rows="10" >
{{myTextArea}}
</textarea>
</p>
Wrapping means that you need to place your code inside the built-in ng-controller directive in order to achieve anything.
Here is also a working copy at plunker.
<body ng-app="myApp">
<form name="myform" ng-controller="myController">
<!-- Place your "RESULT" inside the controller (myController) scope -->
This is {{message1}} in 1st line <br />
This is {{message2}} in last line
<p><input type="text" ng-model="message1"/>Message1</p>
<p><input type="text" ng-model="message2"/>Message2</p>
</form>
<p>
<textarea type="text" id="textarea" model="myTextArea" cols="80" rows="10" >
{{myTextArea}}
</textarea>
</p>
</body>
You mean that you want to put both messages to textarea? Then you need to use watch
$scope.$watchGroup(['message1', 'message2], function(newValues, oldValues, scope) {
$scope.myTextArea =
'This is '+message1+' in 1st line\r\n'+
'This is '+message2+' in last line'
});
Related
I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</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>
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 am making a simple html page with validation by angularjs..
I have taken the html file with angularjs by this process
<title>Student Registration Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
while I am giving the validation in this way
<body ng-app>
and then I am giving the validation in the text area like this code
<input type="text" name="First_Name" maxlength="30" ng-pattern="/^[a-zA-Z\s]*$/"/>
this ng pattern refers that only alphabets and blank space could be entered
but the error is the validation is not happening.
There is no validation because input field has no model bound, so no data to validate. Add ngModel directive and it should work:
<input type="text" name="First_Name" ng-model="user.firstName" maxlength="30" ng-pattern="/^[a-zA-Z\s]*$/" />
You can output the validation state by reading .$valid of the field
<body ng-app >
<div >
<form name="myForm">
<label>
User name:
<input type="text" name="userName" ng-model="userName" ng-pattern="/^[a-zA-Z\s]*$/" >
</label>
<div>
user: {{userName}}
</div>
</form>
<hr>
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br/>
</div>
</body>
http://plnkr.co/edit/lml1eBqEkvCBpz2kb51Z?p=preview
I have an input and I would like to set the input as dirty right away:
<input ng-model="something">
I tried:
<input ng-model="something" class="ng-dirty">
but it does not work.
Take a look at this
Working Demo
html
<div ng-app="">
<form name="myForm" ng-controller="Ctrl">
userType: <input name="input" ng-model="userType" required/>
<span class="error" ng-show="myForm.input.$error.required">Required</span><br></br>
</form>
</div>
script
function Ctrl($scope) {
$scope.userType = '';
}
In general, Angular does the determination if the field is dirty, not you. That being said, you can force it by calling $setDirty() on that element.
<form name='theFormName'>
<input name='theElementName' type='text' />
</form>
In the controller:
$scope.theFormName.theElementName.$setDirty();
You will find more information in the Angular documentation. This isn't something that you should be doing often, though.