I have an ng-repeat to iterate over form fields.
The problem is, if I have an invalid form I don't get any feedback. I don't see the span, nor do I see has-error get applied to the div.
I must be missing something simple, can anyone see what it is?
Here's the ng-repeat code:
<div ng-repeat="i in items">
<ng-form novalidate class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div>
</ng-form>
</div>
Which generates an entry like this:
<div ng-repeat="i in items">
<ng-form novalidate="" class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">Username</label>
<input name="userInput" class="form-control" type="text" ng-model="item.answer" placeholder="Username" required>
<span ng-show="userForm.userInput.$invalid" class="ng-hide">TEST</span>
</div>
</ng-form>
</div>
You want create more than one "userForm"?
If not you can change it to
<ng-form novalidate class="user-form" name="userForm"> <div ng-repeat="i in items">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div> </div>
</ng-form>
Hope it helps.
Related
So i have this html. The issues is that is changing the model(filter) when i select one of those that i have create in a static way but the dynamic ones does not trigger the change of the value. Any ideas?
Thanks.
<div class="row">
<div class="col-xs-6">
<h3>Group 1</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="5"><label>5</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="4'"><label>4</label>
</div>
</div>
<div class="col-xs-6">
<h3>Group 2</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="3"><label>3</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="2'"><label>2</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="1"><label>1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>DinamicItems</h3>
<hr>
<div class="checkbox" ng-repeat="item in items">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="'{{item.value}}'"><label>{{item.text}}</label>
</div>
</div>
</div>
What Charlie is saying is, your model of tag is a primitive one. Each instance of ng-repeat creates it's own scope. Therefore, your models, although named 'tag', are not in fact the same.
To remedy, you should make your model something like vm.tags (vm = view model.)
A few things to read up on, and learn more:
Controller As: https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
Understanding Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes (When I was getting started with Angular, I had to read through this a few times, and still do on occasion)
i'm using camunda 7.2
In my process i have two user tasks (the first one a simple form to insert data, and the second one to show the same form readonly).
I'm using embedded forms.
I have the following form but i have a problem: using the ng-if directive i don't able to instantiate process variable, while if i use ng-show it works.
<form role="form" name="form" cam-form class="form-horizontal">
<div ng-if="typeRequest == 'firstCase'">
<h4 class="text-center">title</h4>
<!-- Oggetto -->
<div class="form-group">
<label for="oggetto" class="col-sm-4 control-label">Oggetto:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="oggetto" cam-variable-name="oggetto" cam-variable-type="String" required="required">
</div>
</div>
<!-- Nota descrittiva -->
<div class="form-group">
<label for="notadescrittiva" class="col-sm-4 control-label">Nota descrittiva:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" id="notadescrittiva" cam-variable-name="notaDescrittiva" cam-variable-type="String"></textarea>
</div>
</div>
<!-- Data -->
<div class="form-group">
<label for="data" class="col-sm-4 control-label">Data:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="data" cam-variable-name="data" cam-variable-type="String" required="required">
</div>
</div>
<!-- Indirizzo -->
<div class="form-group">
<label for="indirizzorichiesta" class="col-sm-4 control-label">Indirizzo:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="indirizzorichiesta" cam-variable-name="indirizzo" cam-variable-type="String" required="required">
</div>
</div>
</div>
Please, any idea?
Thanks in advance
I think this is because ng-if does not renders anything in the DOM.
You probably should use ng-show instead.
I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
I am facing a problem with AngularJS. I have made an application where a user can
select a value from a dropdown list. If the user presses the "add" button, then an array is created that holds all his selections. I want to populate a textbox with all these selections. I have tried ng-repeat but it creates multiple textbox with each array value. This is what I've made so far:
Controller
$scope.multiCompare= [];
// Create the function to push the data into the "multiCompare" array
$scope.newCompare = function () {
$scope.multiCompare.push($scope.compareDate);
$scope.multiComparedate = '';
};
HTML
<div class="form-group">
<label for="installation_year" class="col-sm-2 control-label">Period</label>
<div class="col-sm-4">
<select class="form-control" ng-model="compareDate" ng-options="res for res in compareDates " ng-disabled="disableFormInput()" ></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="newCompare()">Add</button>
</div>
</div>
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
The first image shows the result I'm getting when adding 2013 and 2014 and the second shows what I would like it to return.
Can someone help me through this?
Thanks in advance..
For rendering your Compare field input, you can take use of ngList directive. That will bind your comma(,) separated output directly to the input element.
Change
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
TO
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<input class="form-control" type="text" ng-model="multiCompare" ng-list/>
</div>
This could help you, Thanks.
I have managed to do what I wanted. I changed my html code to this:
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div data-ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="multiCompare" ng-list {{num}} ng-show="$last" />
</div>
</div>
</div>
And it worked!
Your ng-list suggestion was really helpful! Thank you very much!
Here's FIDDLE
Not able to understand that why the required validation is not working ??
HTML
<div ng-app="app">
<div ng-controller="myctrl">
<form name="myform" class="form form-horizontal" novalidate>
<fieldset class="fieldset" ng-show="payment == 'bankAccount'" class="form-group clearfix">
<ul class="form-group">
<li ng-class="{
'has-error': myform.routingNumber.$invalid,
'has-success':myform.routingNumber.$valid}">
<label for="routingNumber">Bank Routing Number</label>
<div class="" ng-show="myform.routingNumber.$error.required"> <span class="help-block">Please enter routing number</span>
</div>
<input type="text" name="routingNumber" class="form-control" required/>
</li>
</ul>
</fieldset>
</form>
</div>
</div>
JS
var app = angular.module('app', [])
You need to provide an ng-model for the angular validation on the form to kick in.
Try:-
<input type="text" ng-model="routingNumber" name="routingNumber" class="form-control" required/>
On a side note:- there is no use of using label for without using id on the target input.
Demo