We Keep Coding

Populate Input field value based on selected dropdown

I am stuck trying to simplify the user inputs by automatically populating the input value based on the above selection box in a model.
Context:
I am trying to populate the account payments by using standard items.
In my DB I have the following:
item | value
item 1 | Value 1
item 2 | Value 2
item 3 | value 3
I would have the following in my modal code
<div class="modal-body">
<label class="label-control">Membership Number:</label>
<div class="input-group">
<input type = "text" class = "form-control" name = "membership" value="">
</div>
<label class="label-control">Rank:</label>
<div class="input-group">
<select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" data-size="6">
#foreach ($payments as $p)
<option value ={{$p->item}}>{{$p->item}}</option>
#endforeach
</select>
</div>
<label class="label-control">Amount</label>
<div class="input-group">
<input type="text" class="form-control" name = "amount" value="xxxx">
</div>
I would like to populate the value="xxxx" based is what selected in the item drop down.
So if Item 3 is selected from the drop down, the value 3 is populated in the value field.
I understand that I require an onchange javascript, but I am a little lost.
Saving this to the DB will not be an issue, just the javascript to update the value field is where I get stuck

Give an ID "selectBox" to selectbox And "textField" to the text box. By using Jquery then you can populate its value.
$(document).on('change', 'select#selectBox', function(){
$('#textField').val();
});
Also make small change in your loop, add quotes " " to value.
#foreach ($payments as $p)
<option value ="{{$p->item}}">{{$p->item}}</option>
#endforeach

Validate inputs in table row with angular

I use this lib to create table on page.
Every row in this table can be edited. So if editMode is on, I show inputs at each column of row. Some of this inputs is required. I want to show red text "Required" or just red border if required field is empty.
But problem - it's simple when I use form. But in my case I can't use forms.
This answer isn't good for me, cause every row must have unique form-name for correct validation.
Example : https://jsfiddle.net/r8d1uq0L/147/
<div ng-repeat="user in users">
<div name="myform-{{user.name}}" ng-form>
<input type="text" ng-model='user.name' required name="field"/>
<span class="error" ng-show="myform.field.$error.required">Too long!</span>
</div>
</div>
<div>
<button ng-click="add()">
Add
</button>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [{name:"1"}, {name:"2"}];
$scope.add = function(){
$scope.users.push({});
}
});

No need to create a dynamic form name, as ng-repeat does create new child scope on each iteration while drawing template on browser. So just keep name as name="innerForm" and use innerForm.field.$error.required to have validation over it.
<div ng-repeat="user in users">
<div name="innerForm" ng-form>
<input type="text" ng-model='user.name' required name="field"/>
{{myform[$index]}}
<span class="error" ng-show="innerForm.field.$error.required">Too long!</span>
</div>
</div>
Forked Fiddle

Angular JS /Angular Material .How to validate Checkbox group on click?

I am using Angular Material and i am doing a simple validation with checkboxes.
The Problem :
At least One checkbox should be checked.
1-If i click a checkbox and then i click again,the "required message" is not shown.
2-If i click a checkbox and then i click again,and press "Tab Key" going throught each checkbox pressing Tab,when i reach the last one and press Tab Key,the message "Required" appears.
I want that ,condition number 1 occurs too,and one more thing ,i dont want to show the "required" message when the application loads. Here is my example : https://codepen.io/anon/pen/zrjjyL
I Hope you can give me a hand,Thanks!!!!!
Code :
HTML:
<form name="myForm" ng-app="myApp" ng-controller="myController"
class="container-fluid" ng-submit="submit()">
<div class="row">
<div class="col-xs-8">
<md-input-container md-no-float>
<label>Name *</label>
<input required="" name="nombre" ng-model="model.nombre">
<div ng-messages="myForm.nombre.$error" ng-
show="myForm.nombre.$touched || myForm.$submitted">
<div ng-message="required">Required.</div>
</div>
</md-input-container>
<md-input-container md-no-float>
<label>Search Options *</label>
<input type="text" id="query" ng-model="query"/>
</md-input-container>
<md-input-container md-no-float>
<md-list-item ng-repeat="item in items | filter:query">
<p style ="font-size: 1.3rem;font-family: Roboto,'Helvetica
Neue',sans-serif"> {{ item.title }} </p>
<md-checkbox name ="permiso" ng-
model="model.opciones[item.id]['checked']" ng-required="!isChecked" ></md-
checkbox>
</md-list-item>
<div ng-messages="myForm.permiso.$error" ng-show=" myForm.permiso.$touched
|| myForm.$submitted">
<div ng-message="required">Required.</div>
</md-input-container>
</div> </div>
JS:
var app = angular.module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial',
'ngMessages'])
.controller('myController', function($scope) {
$scope.items = [{
id: 1,
title: 'Item A'
}, {
id: 2,
title: 'Item A'
}, {
id: 3,
title: 'Item C'
}];;
$scope.model = {}
$scope.model.opciones = {};
$scope.isChecked = false;
$scope.$watch('model.opciones', function(selected) {
$scope.isChecked = false;
angular.forEach(selected, function(selectedItem) {
if (selectedItem.checked) $scope.isChecked = true;
});
}, true);
});

You can check if the form has been modified with formName.$dirty. Then you can only show the error if the form is actually dirty.
<div ng-message="required" ng-if="myForm.$dirty">Required.</div>

You are iterating over your items and overwriting the myFrom.permiso with each new item which means myForm.permiso is always the model of the last item in your items. That is why, when you tab through them, only the last change registers.
You should remove the name attribute of the checkboxes and add a ng-change handler instead of the $watch.
And you add a hidden checkbox for the permiso model which you update on change.
https://codepen.io/kuhnroyal/pen/LGrzGv

angularjs two select with same model

I am not sure if this is possible or not, i am having single data list (ng-model) which is getting passed to more then 4 select as below HTML code. When i select some option in one select box then all another selected value in all select box get un-selected, i guess because of same ng-model is used in more then 4 select box.
Controller :-
angular.module('App').controller('RoleDialogController',
['$scope','entity', 'RoleType',
function($scope, entity,RoleType) {
$scope.role = entity;
$scope.roletypelist = RoleType.query();
});
HTML :-
<div class="form-group">
<label translate="App.role.role" for="field_regions">role</label>
<select class="form-control" id="field_regions" multiple
name="roletype" ng-model="role.roletypelist"
ng-options="roletype as roletype.roleTypeName for roletype in froletypelist = (roletypelist | filter:search | rolelistfilter:120:130) track by roletype.id "></select>
</div>
<div class="form-group">
<label translate="App.role.products" for="field_regions">products</label>
<select class="form-control" id="field_regions" multiple
name="roletype" ng-model="role.roletypelist"
ng-options="roletype as roletype.roleTypeName for roletype in froletypelist = (roletypelist | filter:search | rolelistfilter:130:140) track by roletype.id "></select>
</div>

Focus on next div when valid radio selection or text input has been made

I have a form. Whenever a user hits the enter key on a text input, or when they tap or click on a radio button, I want to be able to set the focus to the next
"formItem" div.
The structure of my form is set up like this:
<div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
<ng-form name="nonsustainedVT" novalidate>
<div class="header"><span class="title">3) Nonsustained VT </span></div>
<div class="content">
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTYes">Yes</label>
</div>
</div>
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTNo">No</label>
</div>
<span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
</div>
</div>
</ng-form>
</div>
Every input has a tabindex, so I was considering using this somehow, but once a user has made a selection I do not wish to necessarily just move the focus to the next tabindex because it may be in the same radio group. I wish to set the focus to the next "formItem" div.
Please see the following Plunkr for a larger code example:
http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview

You don't need tab index, you can use the order of the tab items inside the form. I would make a myFormItem directive like this:
directive('myFormItem', function() {
return {
link: function(scope, element, attr) {
var form = element.closest('form'),
items = form.find('[my-form-item]'),
index = items.index(element),
nextFormItem = $(items[index+1]);
element.find('input[type=radio]').on('click', function() {
nextFormItem.find('input').focus();
});
element.find('input[type=text]').on('keypress', function(e) {
if (e.which === 13) {
nextFormItem.find('input').focus();
}
});
}
};
});
and you need to add the my-form-item attribute to each .formItem (btw, you should probably use kebab-case for classes)