I have this form:
<div id="buscador">
<form action="<?php echo Router::url(array('controller'=>'categorias','action'=>'buscar'));?>" name="form_search" id="form_search" method="post" >
<input type="text" name="search">
<input type="submit" value="Buscar" class="buscador" id="boton_buscar"/>
</form>
</div>
It works fine in all controllers except when you are using the controller "categorias"... in that case, the result is this: http....Categorias/buscar/Buscar
Any idea why this happens?
The problem was present elsewhere, I didn't consider that when clicking the button inside the View "buscar", then JS acts on that click (and this generates the buscar/Buscar problem)
Related
How can I validate one ng-include at a time,
<form name="myform" ng-submit="validateData()" novalidate="novalidate">
<div>
<div ng-include="customtemplate"></div>
</div>
<div class="center">
<input class="btn buttonNewRequest" type="submit" id="submit" value="Submit" />
<input class="btn buttonNewRequest" type="button" id="reset" value="Reset" />
</div>
</form>
I am using the two different templates dynamically using customtemplate, my problem is here, it's validating both template same time.
So how to restrict one template for validation at a time.
Please suggest a better way, I have no clue about this.
Try the example section here: https://docs.angularjs.org/api/ng/directive/ngInclude
Did you try the ng-if directive to conditionally check one template at a time.
Also please include some example code where exactly facing this issue.
you should include file conditionaly use ng-if propoery it will work
I am trying to make a search function which works if I put in the query params into my URL directly but I don't know how to make it work so that it picks it up from the search box and executes it. I have used ng-model to map the text itself to the controller which works but the execution isn't working.
The navbar form:
<form ng-submit="doSearch()" class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="col-md-offset-4 input-group" style="display:table;">
<input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
By the way, my doSearch() function works just fine when I run it manually and so is the search itself. I have also validated that search.text comes through. I guess what I am asking is how do I make the icon (glyphicon-search) execute ng-submit="doSearch()" when the user clicks on it or presses enter.
Sorry if this is very obvious. I was always more on the backend side of things so am sorta new to HTML and Angular.
Thanks
You could place the icon inside a <button> element instead of <span>, tweak a bit of css to integrate it to the form field.
In regards to trigger search on enter, with jQuery something like this could be used:
$('input').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
doSearch();
}
});
did you try using <button type="submit"> before your search icon
<span class="glyphicon glyphicon-search"></span>
to specify that clicking on that button is equivalent to a submit event for that form.
So this worked in the end. First, the proper HTML which works:
<form ng-submit="doSearch()" class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="col-md-offset-4 input-group" style="display:table;">
<input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span ng-click="doSearch()" class="input-group-addon" style="width:1%;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
Furthermore, there was an issue with the view not connecting to the controller. Actually, let me rephrase that - it was connecting to the controller but only when the whole page loaded and for my test, I had a console.log('I have loaded') put in there. So when I saw "I have loaded", I thought my controller was invoked properly.
However, the doSearch() was in the controller which was connecting via angular routing, so the ng-View was not connecting to the right controller.
I am not sure if this means anything to anyone but I am writing this in case someone else comes across an issue like mine.
So just to summarise the issue was not with the HTML as I originally thought. ng-submit (for form submission when pressing enter) and ng-click (for clicking the glyphicon) does the trick.
I have the following
<form id="myForm" class="form-inline" >
<div class="container-fluid ">
<input ng-class="{'requiredError':programNameError}" name="first" ng-model="ProgramDetail.ProgramName" placeholder="Name" class="form-control input-xs" type="text" style="width:70%" />
</div>
</form>
This page is being called by the ngRoute when I navigate to a specific route and I specify the controller in the route configuration, buen when I try to access the $scope.myForm i get undefined.
Am I missing something here?
Give the form a name attribute to expose it on the $scope
<form id="myForm" name="myForm" class="form-inline" >
</form>
From the docs:
If the name attribute is specified, the form controller is published
onto the current scope under this name.
Argh, not enough reputation to write a comment, so writing as an answer.. :(
try defining the attribute name for the form.. I have a similar case and it worked only with this..
<form id="myForm" class="form-inline" name="myForm">
</form>
I am currently facing the following problem:
I would like to validate my form input using the Angular ngModel directives.
When using those together with $scope they work fine.
Now, working with the controllerAs syntax, they fail to work.
This problem is poorly documented, the only help I could find is this article.
Here is a small example of my code:
The template gets called with myController as vm
<form name="vm.signUpForm" ng-submit="vm.signup(vm.user)">
<label for="name">Name</label>
<input type="text"
class="form-control"
id="name"
name="name"
placeholder="Full name"
ng-model="vm.user.name"
ng-minlength="2" required />
<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<span ng-show="vm.signUpForm.name.$error.required">Please fill in your name</span>
<span ng-show="vm.signUpForm.name.$error.minlength">A minimum of 2 [...]</span>
</div>
[...]
</form>
Am I forced to use $scope to validate the form? Or did I miss something ?
Thanks in advance!
Solution by: Andrew Gray
I had to change the following lines to get this to work:
<form name="vm.signUpForm" ... >
<!-- To -->
<form name="signUpForm" ...>
<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<!-- To -->
<div ng-if="signUpForm.name.$invalid">
<span ng-show="vm.signUpForm.name.$error.required" ... >
<!-- To -->
<span ng-show="signUpForm.name.$error.required" ... >
First things first - you don't need the vm. on the form.
<form novalidate name="someForm">
<label>
Some Text:
<span class="danger-text" ng-if="someForm.someText.$invalid">
ERROR!
</span>
</label>
<input type="text" name="someField" />
</form>
The way it winds up working, is that there's a validation object that is not tied to the scope. The controllerAs syntax is just spinning off a instance of the controller as a scope variable.
Try shaving off the vm. from the form and child elements' names, and you should be OK.
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.