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
Related
I have 2 related inputs in angular one is type number and the other is type text.
They both display the same value with the only difference being that the type text input displays the value of the type number input formatted for currency.
Only one of these is displayed at any given time. The behaviour I'd like is for the text input to be displayed initially and then on the click event the text input is hidden and the number input is shown. Similarly when the blur event happens on the number input the number input is hidden and the text input is shown.
The markup for this looks something like this:
<div>
<input type="number" ng-model="aValue" ng-blur="hideMeAndShowInputBelow">
<input type="text" ng-value="aValue | currency:'': '0'" ng-click="hideMeAndShowAndFocusInputAbove" readonly="readonly">
</div>
I know I could add extra properties to make this work but being relatively new to Angular this feels like the sort of thing that there is probably an elegant solution for.
Any help would be much appreciated.
You can assign a variable in ng-blur/ng-click and hide/show the inputs depending on the variable value.
<div>
<input type="number" ng-model="aValue" ng-show="showNumber" ng-blur="showNumber = false">
<input type="text" ng-value="aValue | currency:'': '0'" ng-show="!showNumber" ng-click="showNumber = true" readonly="readonly">
</div>
Check the plunker here:
https://plnkr.co/edit/yMFiXWuUF1R9BPGr2usT?p=preview
Alternatively, if this is a component you're going to use multiple times around your app, you could create a custom directive that achieves the same functionality, and thus avoid a lot of code duplication etc.
Try out something like this
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
<br />
<button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
</button>
</div>
DEMO
Thanks for the suggestions. I followed the same approach but because I had some additional requirements (I wanted the value to be focussed when switching to the edit mode so the user can edit immediately without having to click the input again) I ended up writing a directive. It's here:
PLUNKER
But here is the markup.
<div class="mt-flight-input" ng-class="{'mt-dirty': value.newvalue != value.initial, 'mt-zero': value.newvalue == 0}">
<input type="number" class="mt-input" placeholder="0" ng-show="value.isAuthoring" ng-model="value.newvalue" ng-blur="checkValue('blur', value)" ng-focus="checkValue('focus', value)">
<input type="text" class="mt-input" placeholder="0" ng-show="!value.isAuthoring" ng-value="value.newvalue | currency:'': '0'| comma2dots" ng-click="showEditor($event, value)" ng-focus="showEditor($event, value)" readonly="readonly">
</div>
I have a form where a model contains an array of sub-models, like this:
<form name="form1">
<div ng-repeat="sub in model.submodels">
<input ng-model="sub.name" required>
<button ng-click="delSubmodel($index)">x</button>
</div>
<button ng-click="addSubmodel()">+</button>
<button ng-disabled="form1.$invalid" type="submit">Save</button>
</form>
How can I make form invalid when there are no input fields (or, in general, when the count of input fields is less than/greater than some value)
Update: Thanks for responses, I hope this can be done outside of controller.
Okay, I just got what you want to achieve, you will had to add a constraint to the form, which is the size of the subModel, so in your submit method:
Before doing anything
$scope.form1.$setValidity('size', model.subModels.length <= 0);
This will set the validity of the form to false in case your condition is false, or viceversa, you can also show a message to notify it to the user, adding this:
<form name="form1">
<div ng-repeat="sub in model.submodels">
<input ng-model="sub.name" required>
<button ng-click="delSubmodel($index)">x</button>
</div>
<input type="hidden" name="size" ng-model="model.subModels.length" />
<button ng-click="addSubmodel()">+</button>
<button ng-disabled="form1.$invalid" type="submit">Save</button>
You can check this example if you don't feel you didn't understood well my point, which is doing the same, just changing the validity for a single input.
Hope it helps you.
I'm trying to incorporate some of the new features of 1.3 into our app. I have a form and couldn't seem to get ng-messages to work. So I put it in a plunker and I still seem to be doing something wrong. My view looks like this:
<form name="profileForm"
ng-submit="profile.submit(profileForm.$valid)"
novalidate>
<input type="text" name="favoriteNumber"
ng-model="profile.number"
required ng-minlength="5" />
<div class="errors" ng-messages="profileForm.favoriteNumber.$error">
<div ng-message="required">this is required</div>
<div ng-message="minlength">this is too short</div>
</div>
<input type="submit" value="Save" />
</form>
I expected to see only one ng-message tag at a time, but both are present when the page loads.
At least I expect the message to go away as their validation criteria are met, but no matter what I type in the input, both messages are always present. It is as if I didn't include the ng-messages script at all.
What am I doing wrong here?
var app = angular.module("demo", ['ngMessages']);
include ngMessages module in you application module as a dependency.
plunker
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)
Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"
http://jsfiddle.net/Xk3VB/7/
<div ng-app>
<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
<div ng-repeat="variant in variants" ng-form="variant_form">
<div>
<label>Duration:</label>
<input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
<span ng-show="TODO">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="variants[{{$index}}][price]" ng-model="variant.price" />
<span ng-show="TODO">Price required</span>
</div>
</div>
</form>
</div>
ps: this is just piece of form, which is more complicated
Thanks
AngularJS relies on input names to expose validation errors.
Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.
Long story short you should rely on ng-form to validate dynamically created inputs. Something like :
<div ng-repeat="variant in variants" >
<ng-form name="innerForm">
<div>
<label>Duration:</label>
<input name="duration" ng-model="variant.duration" required />
<span ng-show="innerForm.duration.$error.required">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="price" ng-model="variant.price" required/>
<span ng-show="innerForm.price.$error.required">Price required</span>
</div>
</ng-form>
Working fiddle here
UPDATE : Base on your serverside requirement why not do something like that :
<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />
The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.
PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit