When I used angular form validation, it gives undefined error in angular controller.
My HTML View
Index.xhtml (Main View)
<div>
<select ng-model="val">
<option value="A"></option>
<option value="B"></option>
<option value="C"></option>
</select>
<div ng-if="item.value=='A'">
#Html.Partial("A")
</div>
<div ng-if="item.value=='B'">
#Html.Partial("B")
</div>
<div ng-if="item.value=='C'">
#Html.Partial("A")
</div>
</div>
A.chtml (partial view)
<div>
<form name="formA" ng-submit="A();">
<div ng-model="model1" required>
</div>
<input type="submit" value="Add"/>
</form>
</div>
B.chtml (partial view)
<div>
<form name="formC" ng-submit="B();">
<div ng-model="model2" required>
</div>
<input type="submit" value="Add"/>
</form>
</div>
JS File
$scope.A = function(){
if($scope.formA.$valid){
}
};
First I Select Value A in main view drop-down and, insert data and clicked Add button. Then it will checked the form validation. if validation true, function work success.
But,
after that I select value C i drop-down and try add inserted value, angular controller cannot identify the form name. It gives undefined error.
If I select B value after A selected, function execute without error. I tried to after set
$scope.formA.$setPristine();
$scope.formA.$setUntouched();
But It doesn't give any effect for this erro.
Can anyone help me?
any explanation about internal functionality?
You must have $scope prefixed to formA, that was more than likely the issue
Related
Not sure what I am doing wrong here.
I want to display an ng-message after the user submit the form. However , the message is shown when the form is rendered. It seem like the ng-show is not evaluating.
I printed the field in the expression and it is false when I open the form. Also, I change it to ng-hide but I have the same issue.
Can you please have a look ..
<div class="small-12">
<label>first name
<span class="field-error"> *</span>
</label>
<input name="firstName"
type="text"
maxlength="25"
ng-disabled="isSubmitting" required
ng-model="candidate.firstName"
ng-class="{error:isFormSubmitted && contactForm.firstName.$error.required}" />
<div ng-messages="forms.contactForm.firstName.$error"
class="errorFormLabel" role='alert'>
<div ng-message="required"
ng-show="isFormSubmitted">This is a required field {{isFormSubmitted}}
</div>
</div>
</div>
Think about ng-messages as a switch clause, you can nest the /ng-show/ng-hide inside ng-message directive but not use them together
For example:
<div ng-messages="forms.contactForm.firstName.$error"
class="errorFormLabel" role='alert'>
<div ng-message="required">
<span ng-show="isFormSubmitted">This is a required field {{isFormSubmitted}}</span>
</div>
</div>
</div>
If you don't want an extra element: <span>, try ng-if, basically ng-if has the priority higher than any other angularjs directive and it will force the ng-message directive to be removed from the DOM tree if the expression is not positive.
<div ng-message="required"
ng-if="isFormSubmitted">This is a required field {{isFormSubmitted}}
</div>
Clone div is repeating, when I click add button.
How can I post the fields inside clone div.
<div class="row" id="append-row">
<div class="clone-div-{{count}}" id="clone-div">
<div class="col-md-6">
<div class="form-group input-group-sm">
<label>Title</label>
<input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter.title">
</div>
</div>
<div class="col-md-6">
<div class="form-group input-group-sm">
<label>Select Language</label>
<select class="form-control" name="country" id="country" ng-model="chapters.chapter.languageID" ng-options="value.ID as value.language for value in technical.languages">
<option value="">Select Country</option>
</select>
</div>
</div>
</div>
</div>
This part is angularjs code.
$scope.count = 1;
$scope.addChapter = function() {
var iEl = angular.element( document.querySelector('#append-row') );
var wEl = angular.element( document.querySelector('#clone-div') );
iEl.append(wEl.clone());
$scope.count+=1;
};
You should do cloning/repeating inside the template in a ng-repeat and have the data prepared beforehand, that is a much cleaner way. You'll notice for example in the template code you have, all the ng-model's are the same, and will always display the same information if you have 1 'clone' div or 100.
A better method would be to write your clone div in the template and use it as a repeatable ng-template 'script', for example:
// main template
<script type="text/ng-template" id="cloneable.html">
// Your code here, but change reference to ng-model, ie this line as an example:
<input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter[$index].title">
</script>
// main template, your new repeat then includes the repeatable script
<div ng-repeat="foo in manyFoos"
ng-include="'cloneable.html'"></div>
This way you can use the $index that arises from ng-repeat, as part of the model to accurately separate each individual repeat block. In your controller, chapters.chapter will be an array of objects.
I don't know about the 'add' button part or what information you're adding, but the above should take care of the model problem you'll be encountering.
I need to be able to see in the Angular controller if the datepicker is pristine or not. Tried all sorts of things including sending the pristine value in a method but cannot get this value. Below is the view code:
<form name="myForm">
<!-- Datepicker From -->
<div class="small-6 medium-5 large-2 columns" ng-if="vm.subViewActive">
<div class="input-group">
<input name="valuationDatePickerFrom" ng-model="name" type="text" class="datepicker" id="valuationDatePickerFrom" placeholder="DD/MM/YYYY" pikaday="vm.datePickerFrom" on-select="vm.selectStartDate(pikaday)" year-range="{{ vm.yearRange }}" >
<div class="input-group-addon">
<label for="valuationDatePickerFrom" class="postfix">
<i class="fa fa-calendar"></i> From
</label>
</div>
</div>
</div>
</form>
and then I also tried :
var isPristine = $scope.myForm.valuationDatePickerFrom.$pristine;
console.log(isPristine);
in my controller but cannot get the pristine value. Read lots of posts here but mainly to do with CSS classes and front-end control or setting the pristine state from the backend not getting or checking the pristine state.
Thanks anybody that can help.
You are using:
var isPristine = $scope.myForm.valuationDatePickerFrom.$pristine;
but your form's name is not myForm.
Change <input name="name"... <input name="valuationDatePickerFrom"...
Then you can use:
var isPristine = $scope.userForm.valuationDatePickerFrom.$pristine;
Also, the controller is getting called before the view is created, so no myForm exists at the time the controller runs. Try adding a $timeout like so:
$timeout(function() {
var isPristine = $scope.userForm.valuationDatePickerFrom.$pristine;
console.log(isPristine);
}, 100);
plunkr
The above solution only works on page load, but you need to know this value when the page is being used. Instead pass the value to the controller when an action happens:
<form name="myForm">
<input type="text" name="valuationDatePickerFrom" ng-model="valuationDatePicker" ng-blur="alerty(myForm.$pristine)">
</form>
.controller('MainController', function($scope) {
$scope.alerty = function(isPristine){
alert('isPristine: ' + isPristine);
};
https://plnkr.co/edit/f0EWvYmoXCn8UOH3QCfE?p=preview
http://plnkr.co/edit/2UFfaG?p=preview
I used this sample code to build a simple app and I noticed that the edit function doesn't work when you are using ng-models that are repeated in a loop. I know this, because I tried using ng-models outside of the ng-repeat loop and it worked perfectly. So when you have two instances of ng-models with the same name, you get a blank data back when you try to get the values back from the view.
This is my view:
<ul ng-repeat="notes in notes">
<li>
<span ng-hide="editing" ng-click="editing = true">{{note.name}} | {{note.content}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Name" ng-required/>
<label>Content:</label>
<input type="date" ng-model="content" placeholder="Content" ng-required/>
<br/>
<button class="btn" ng-click="edit(note.id)">Save</button>
</form>
</li>
</ul>
This is my edit method:
$scope.edit = function (id) {
var note = notesRef.child(id);
var newNote= {
name : $scope.name,
content : $scope.content
}
};
note.update(newNote);
};
When I refer to a ng-model inside of ng-repeat, I can only get the value null for some reason. I get the correct value when I refer to ng-models outside of the ng-repeat for some reason.
How do we solve this problem? What's the simplest solution?
The problem is that the item belongs to the scope of the repeat.
If you changed your ng-model to:
<ul ng-repeat="notes in notes">
<li>
<span ng-hide="editing" ng-click="editing = true">{{note.name}} | {{note.content}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="note.name" placeholder="Name" ng-required/>
<label>Content:</label>
<input type="date" ng-model="note.content" placeholder="Content" ng-required/>
<br/>
<button class="btn" ng-click="edit(note)">Save</button>
</form>
</li>
</ul>
Where it's now note.name / note.content.
Then instead of padding the note.id to the edit button, you pass in the entire note i.e ng-click="edit(note)"
Then your controller will get passed the entire note.
$scope.edit = function (note) {
// send note to server via $http, changes to `note` are already made directly to the note itself
};
Hope that makes sense.
it should be like this. As we know ng-repeats directive create their own new scope.
bday.editing
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="bday.editing" ng-click="bday.editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="bday.editing" ng-submit="bday.editing = false">
<label>Name:</label>
<input type="text" **ng-model="bday.name"** placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" **ng-model="bday.date"** placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</li>
</ul>
and here what I understand from your question is that you want to edit only the item on which you have click. this is the solution for the same.
One more solution for the same problem is that create a new function that take one argument that is "bday". make edit true only for this item and set editing false for all others element. this solution is for that case if user doesn't submit the form and click on other item.
I have a div in which I am not using the form tag and submit the form on ng-click button but how can I apply the validation of given filed in AngularJS.
<div ng-controller="AddNewvisaController">
<input type="text" class="form-control" ng-model="visa.requirement">
<select ng-model="visa.country">
<option value="1">abc<option>
<option value="2">xyz<option>
<option value="3">pqrs<option>
</select>
<button type="submit" data-ng-click="submitvisa()">Submit</button>
</div>
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
You may try something below,
var myValidationModule = angular.module('myApp', []);
myValidationModule.controller('AddNewvisaController', function($scope) {
$scope.visa = {requirement : "", country : "pqrs"}
//initilize to false - it will make sure the disable the submit button
$scope.enableSubmitButton = false;
//Do the watch collection - whenever something changed, this will trigger and then do the validation as per the needs - here i validated as not empty - you can do whatever you wish and if everything is fine, then enable the button
$scope.$watchCollection(['requirement, country'], function(valueArray) {
if(valueArray[0] != "" && valueArray[1] != "") {
$scope.enableSubmitButton = true;
} else {
$scope.enableSubmitButton = false;
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AddNewvisaController">
<input type="text" class="form-control" ng-model="visa.requirement">
<select ng-model="visa.country">
<option value="1">abc<option>
<option value="2">xyz<option>
<option value="3">pqrs<option>
</select>
<button type="submit" data-ng-click="submitvisa()" ng-disable="!enableSubmitButton">Submit</button> <!-- introduce the disable directive to make is disable by default and this will acitve if all the required filed had met their validation
</div>
</div>