Here is my html form in laravel application which has hidden fields, these hidden values need to send to the angular js controller.
<form accept-charset="UTF-8" enctype="multipart/form-data">
<input name="_token" type="hidden" value="{{ csrf_token() }}">
<input name="user_id" type="hidden" value="{{ Auth::user()->id }}">
<input name="post_id" type="hidden" value="<% post.id %>" >
<input name="published_at" type="hidden" value="{{ Carbon\Carbon::today()->format('Y-m-d') }}">
<input class="form-control" placeholder="comment" ng-model="contentField" type="text" >
<button type="submit" ng-click="addComment()">comment</button>
</form>
My Angular Controller is as follows
$scope.addComment = function(){
var comment = {
user_id: $scope.user_id,
content: $scope.contentField,
post_id: $scope.post_id,
published_at: $scope.published_at
};
I am only getting the value of contentField in the controller, Please Help me to solve this problem !
It seems that you are missing the ng-model tags on your hidden imports. Because of that angular does not know how or where to bind the hidden input values to the $scope. Adding those tags to all of the hidden inputs should fix your issue of them not being found on the $scope.
We can simply try like this:
<input type="hidden" ng-model="post_id" ng-init="post_id=<% post.id %>"/>
OR
<input type="hidden" ng-model="post_id" value="{{post_id}}" ng-init="post_id=<% post.id %>"/>
OR
<input type="hidden" ng-model="post_id" value="<% post.id %>" ng-init="post_id=<% post.id %>"/>
Note: here ng-init is doing the trick binding whatever from another model or object or direct value :)
Related
I am working in a project where i have to retrieve details from mongod and show it as a type ahead in a text box .
My code is
Html :
<div class="form-group">
<label for="resourceName" class="col-sm-4 control-label">Enter the Page Name<span>*</span></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="title" ng-model="selected" typeahead="getPageName()" required>
</div>
</div>
Controller :
$scope.getPageName = function(){
return $http.get('/api/getPageName').success(function(response){
return limitToFilter(response.data, 15);
}).error(function(response){
});
};
But the problem is that , the function is not at all getting called if i type in the textbox .
Thanks in advance
you can use ng-change directive to call function after you start typing.
<input type="text" class="form-control" name="title" ng-model="selected" ng-change="getPageName()" required>
https://docs.angularjs.org/api/ng/directive/ngChange
Today I approached a weird case: I got form with two radio buttons.
When one, currently checked, is disabled, form shouldn't be able to submit.
The thing is, that standard way with form.$valid doesn't work :-/
UPDATE
Even if I watch for changes in form, $invalid status is not reflected on ng-disable save button. Why?
<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>
<button ng-disabled="!RadioPen.someForm.$valid">Save</button>
Here is full working example: CodePen
The form.$valid is working fine. The required check works based on the value of a form element. Since you are already providing a value to the model associated with the radio buttons, i.e, RadioPen.data.radio, in your controller script, the required condition is being fulfilled and hence the form is getting validated. Here is a modified and working version of your code where I have removed the initialization of the model for the radio buttons.
angular
.module('test', [])
.controller('RadioPen', radioPen)
function radioPen($scope) {
var vm = this;
vm.data= {};
$scope.RadioPen = vm;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<form name="RadioPen.someForm" ng-controller="RadioPen" novalidate>
Current
<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
Delayed
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>
<button ng-disabled="!RadioPen.someForm.$valid">Save</button>
{{'is valid: ' + RadioPen.someForm.$valid}}
</form>
</div>
check this out:
<div ng-app="test">
<form name="ctrl.someForm" ng-controller="RadioPen as ctrl" novalidate>
Current
<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
Delayed
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>
<button ng-disabled="ctrl.someForm.$invalid">Save</button>
{{'is invalid: ' + ctrl.someForm.$invalid}}
</form>
</div>
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'
});
I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.
there is forms inside ng-repeat. When i submit any form then last form is submitted every time that's wrong.
only selected form need to submit.
My code is
<ul rn-carousel rn-carousel-indicator style="list-style: none">
<li ng-repeat="story in stories">
<form ng-submit="commentsSubmit($index)" method="post">
<input type="hidden" ng-init="comment.itemID = story.news_id" ng-model="comment.itemID">
<input type="hidden" ng-init="comment.owner_id = 1" ng-model="comment.owner_id">
<input type="hidden" ng-init="comment.type = 'L'" ng-model="comment.type">
<input type="hidden" ng-init="comment.from = 'app'" ng-model="comment.from">
<input type="hidden" ng-init="comment.user_id = user_id" ng-model="comment.user_id">
<input type="hidden" ng-init="comment.redirect = 'story'" ng-model="comment.redirect">
<textarea ng-model="comment.content" class="textarea" rows="3" placeholder="Your Comment">{{ content }}</textarea>
<button class="button--cta">Submit</button>
</form>
<li>
</ul>
How i achieve this?
There is already a similar question discussed about this,
FYI form submission on ng-repeat
Pass the object instead of id, in your controller,
$scope.commentsSubmit = function(story)
Do submit like this, <form ng-submit="submit(story)">
$scope.commentsSubmit = function(story){
var comments = story;
$http({ data: $.param($scope.comment)
}).success(function(data) {
MyCache.put('comments-'+$scope.comment.itemID, data.reviews);
})
};