I've 3 input fields the first field is of type select and the remaining two are of type text. Now if I select a value from dropdown list, then the corresponding values should appear in the remaining two input fields. How to do it in AngularJS. Thank you!
For example if I select User1 from the dropdown then User1 corresponding email & phone number should appear in the corresponding input fields.
NOTE: the values are fetched from the database based on the selected option
<select>
<option value="user1">User1</option>
<option value="user2">User2</option>
<option value="user3">User3</option>
<option value="user4">User4</option>
</select>
<input type="text" id="eamil" placeholder="Email">
<input type="text" id="phone_no" placeholder="Phone number">
<select ng-options="s as s in Users" ng-model="user" ng-change = "GetData(user)">
<input type="text" id="eamil" placeholder="Email" ng-model="userEmail">
<input type="text" id="phone_no" placeholder="Phone number" ng-model="userPhone">
Now on controller
$scope.GetData = function(user){
// Here Please add Code to fetch the data from database. Here userEmailFromDB and userPhoneFromDB are the values that you get from database.
$scope.userEmail = userEmailFromDB;
$scope.userPhone = userPhoneFromDB;
}
$scope.userListSelected = function(userList){ $scope.email = userList.email; $scope.phoneNumber = userList.phoneNumber;
<select ng-model="userList" ng-options="user.name for user in userData" ng-change="userListSelected(userList)">
<input type=text ng-model="email" />
<input type=text ng-model="phoneNumber"/>
I have something like this, may it helps:
$scope.onChangeSelectedUser = function(item) {
$scope.user.user_id = item.id;
}
$scope.selectedUser = [];
<select class="form-control with-search" select-picker data-live-search="true" title="Select User" ng-model="selectedUser"
ng-options="u as u.email for u in users"
ng-change="onChangeSelectedUser(selectedUser)">
</select>
<input type="text" readonly class="form-control" ng-model="selectedUser.user_id"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.email"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.phone_no"/>
Related
In JQuery I can set value for multiple elements at once in this way:
<form action="" id="mainForm">
<input type="text" name="Phone" class="deftext" value="" >
<input type="text" name="Number" class="deftext" value="" >
<input type="text" name="Name" class="deftext" value="" >
<input type="text" name="Lastname" class="deftext" value="" >
<input type="text" name="Middlename" class="deftext" value="" >
<input type="text" name="Age" class="deftext" value="" >
<input type="text" name="Email" class="deftext" value="" >
<input type="text" name="Occupation" class="deftext" value="" >
</form>
$('#mainForm .deftext').val("hello");
// OR
$('#mainForm input:text').val("");
Are there similar approach in ExtJS 4 to modify the following code into single line?
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
Ext.getCmp('mainForm').down('[name=Name]').setValue('');
....
Your JQuery code is not really readable, because when looking at the function you can't see that there are multiple fields affected. This is why ExtJS does not support such a syntax. Either you use
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
or you use
Ext.getCmp('mainForm').getForm().setValues({
Phone: '',
Number: ''
});
Unlike your JQuery example, both of these are readable, because I don't have to know which classes have been applied to which fields.
If you want to reset all fields to the value that was set during the last form.loadRecord operation, or the initial value if no form.loadRecord operation has been performed, use form.reset:
Ext.getCmp('mainForm').getForm().reset();
Well, if child components get something in common (xtype for example) you can do something like
Ext.getCmp('mainForm').query('textfield').each(function(component){component.setValue('')});
but no, you cant use component methods on array of components.
I want to create my custom directive data-from .
data-from="id-employee"
the attribute "data-from" indicates that the inputs of this fieldset must contains the values of the fieldsets which id start with "id-employee"
the user should be able to select a leader from the list of the employee.
Any ideas??
Thanks in advance !!
<form>
<fieldset id="id-employee[0]">
<input type="text" name="name-employee[0]"/>
<input type="text" name="lastname-employee[0]"/>
</fieldset>
<fieldset id="id-employee[1]">
<input type="text" name="name-employee[1]"/>
<input type="text" name="lastname-employee[1]"/>
</fieldset> <fieldset id="id-employee[2]">
<input type="text" name="name-employee[2]"/>
<input type="text" name="lastname-employee[2]"/>
</fieldset>
<fieldset id="id-leader" data-from="id-eployee">
<select id="select-employee">
<option>Select a Team leader</option>
<option id="select-employee-0" value="0">name lastname of the employee 0</option>
<option id="select-employee-0" value="1">name lastname of the employee 1</option>
<option id="select-employee-0" value="2">name lastname of the employee 2</option>
</select>
<input type="text" name="name-leader"/>
<input type="text" name="lastname-leader"/>
</fieldset>
</form>
You can use data binding to achieve this like -
<form ng-init="employees=[]">
<fieldset id="id-employee[0]">
<input type="text" model="employees[0].name" name="name-employee[0]"/>
<input type="text" model="employees[0].lastname" name="lastname-employee[0]"/>
</fieldset>
and then bind it in select
<select ng-model="leader" ng-options="employee.name as employee.name for employee in employees"></select>
*It is not a question, i share a solution *
I need to access to my FORM from my controller to valid some input accroding to it value ( example, the ISO code should be in my ISO code list ... )
The question is not about how to valid or check the form or input but how to access to form properties ( $valid / $error etc), not to the input value (use ng-model for that )
<form autocomplete="off" name="formLocalisation">
<input type="text" placeholder='countrycode'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-change="validLocalisationField('countrycode')"
ng-model="countrycode" />
<input type="text" placeholder='country name'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countryname"
ng-change="validLocalisationField('countryname')"
ng-model="countryname" />
</form>
Actually there is another way without using $parent:
<form autocomplete="off" name="formLocalisation">
<input type="text" placeholder='Code ISO'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-blur="validLocalisationField(this)"
ng-model="specimen.countrycode" />
</form>
you just have to initialize the form:
$scope.formLocalisation = {};
$scope.validLocalisationField = function (field) {
if ( .... ) {
$scope.formLocalisation[field].$setValidity("countrycode_valid", false);
} else {
$scope.formLocalisation[field].$setValidity("countrycode_valid", true);
}
};
After searchs and headache i share a solution that i found
You need to put $parent in the form name ! :
<form autocomplete="off" name="$parent.formLocalisation">
<input type="text" placeholder='countrycode'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-change="validLocalisationField('countrycode')"
ng-model="countrycode" />
<input type="text" placeholder='country name'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countryname"
ng-change="validLocalisationField('countryname')"
ng-model="countryname" />
</form>
In the controller you can access to the form with $scope.formLocalisation:
$scope.validLocalisationField = function (field) {
if ( .... ) {
$scope.formLocalisation[field].$setValidity(field+"_valid", false);
} else {
$scope.formLocalisation[field].$setValidity(field+"_valid", true);
}
};
source = http://forum.ionicframework.com/t/cant-access-form-on-scope/679/18
I have a select control and a text control in my form. When there is a change in the selection (when user selects a particular value), i want the text control to be made mandatory. This text control should not be mandatory when the form is opened. Is this possible?
Am using bootstrap 3 and AngularJS. And am a newbie to both.
here is my code:
<div class="form-group">
<label class="col-sm-2 control-label">Select an Option</label>
<div class="col-sm-4">
<select class="form-control" name="type">
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="text" id="text" ng-model="text" >
<span class="help-block" style="color:red" ng-show="myform.text.$dirty && myform.text.$invalid">
<span ng-show="myform.text.$error.required">Required, when Option B is selected</span>
</span>
</div>
</div>
By default "option A" will be selected, when the user selects "Option B", i want my text control to be made mandatory. This will not be mandatory when the form is opened
Any help is much appreciated
I would use ng-change in your select box to set a $scope property that will toggle the value of ng-required in your text field.
The select box:
<select class="form-control" name="type" ng-model="optionValue" ng-change="setRequired()">
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
The text field:
<input type="text" class="form-control" name="text" id="text" ng-model="text" ng-required="textRequired" />
The controller:
function mainController($scope) {
$scope.optionValue = 'A';
$scope.textRequired = false;
$scope.setRequired = function() {
if($scope.optionValue==='B') {
$scope.textRequired= true;
}
else {
$scope.textRequired = false;
}
}
}
http://plnkr.co/edit/lyMgKIEJukpgnA31hnTz?p=preview
i have a form with two differently named ng-models. I need to pass both of them with the form. How would this work? I need to pass currentItem + currentItem.Customer I am having trouble with a PdfSharp controller and I want to see if this is the reason why the Customer Values are being passed back as Null.
controller
$scope.EmailPdf = function () {
var id = $scope.currentItem.JobId
$http.get('/api/Pdf/' + id).success(function () {
$scope.PrintPreviewModal();
});
}
form
<form ng-submit="submitJob()" enctype="multipart/form-data" name="myForm">
<fieldset>
<div class="col-xs-12">
<label>Number:</label>
<input ng-model="currentItem.JobNumber" type="text" name="JobNumber">
<label>Customer:</label>
<input type="text" ng-model="currentItem.Customer.CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
typeahead-on-select="selectEditCustomer($item)">
</div>
<input ng-model="currentItem.CustomerId" type="text" ng-hide="true"/>
<div class="inline-fields">
<label >Status:</label>
<selectng-model="currentItem.JobStatus">
<option value="" selected="selected">Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label>Address:</label>
<input ng-model="currentItem.Customer.CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label>Name:</label>
<input ng-model="currentItem.JobName" type="text">
<label>City:</label>
<input ng-model="currentItem.Customer.CustomerCity" type="text">
<label>St:</label>
<inputng-model="currentItem.Customer.CustomerState" type="text">
<label>Zip:</label>
<input ng-model="currentItem.Customer.CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label>Address:</label>
<input ng-model="currentItem.JobAddress" type="text">
<label>Ph:</label>
<input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text">
<label>Fax:</label>
<input disabled style="width: 105px"ng-model="currentItem.Customer.CustomerFaxNumber" type="text">
</div>
<input ng-click="EmailPdf(currentItem)" type="button" value="Email" />
Well it's a bit difficult to tell exactly what you are asking here, but it sounds like you mean that you need to pass more information than the ID into your get. So you can pass the entire currentItem with all it's content like this
$http.get('/api/Pdf/' + id,angular.toJson($scope.currentItem)).....
Is that what you are trying to do?