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>
Related
I've been through all of similar/relative topics on ng-maxlength on StackOverflow, but still could not find an answer. My problem is the following snippet of code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
The error message, which should be displayed only if the input is invalid, is constantly shown! Any advise on what it the reason for that and how could I get rid of it would be highly appreciated!
All angularjs applications must have a root element in order to allow angularjs to be able to effective on your view. And that is ng-app directive. This directive is to auto-bootstrap an AngularJS application
You must add it somewhere to the root element
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block" ng-app="">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
Read more about it here
I'm new with angular forms, i'm trying to validate an email field, and sho a message if the input is invalid.
Ithinked to have do everything correctly, but the error message doesen't show.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" ng-model="Login.userMail" required ng-class="{'invalidClass': Login.userMail.$invalid}">
<div ng-show="Login.userMail.$invalid">
Non va mica bene
</div>
</div>
</form>
Can you tell me if in the markup there is something wrong please?
put name attribute on your email input field and then use the field name while show/hide validation message.
Also make sure your form name and ng-model object shouldn't be the same otherwise it will get wiped off. In this case Login and ng-model's Login were conflicting.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" name="email" ng-model="user.userMail" required
ng-class="{'invalidClass': Login.email.$invalid}">
<div ng-show="Login.email.$invalid">
Non va mica bene
</div>
</div>
</form>
Following this video tutorial, I am trying to bind three text inputs together.
But only the first get updated.
Here is my JsFiddle attempt
the index.html relevant part :
<body ng-app="">
<input type="text" placeholder="Your text" ng-model="data.message"></input>
<h2>{{data.message}}</h2>
<div ng-controller="FirstController">
<input type="text" placeholder="Your text" ng-model="data.message"></input>
<h2>{{data.message}}</h2>
</div>
<div ng-controller="SecondController">
<input type="text" placeholder="Your text" ng-model="data.message"></input>
<h2>{{data.message}}</h2>
</div>
</body>
script.js
function FirstController($scope){
}
function SecondController($scope){
}
What did I miss ?
Please also notice, that I do need the nested div tags and controller, as the purpose is to use scope inheritance.
Also, these global function definitions for the controllers are a choice, as I wanted to keep the video author method for now, in my real projects I will use the best practise which consist of using a module var controller() method).
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 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)