Following is my code snippet. I want to validate my dropdown using angular.
<td align="left" width="52%">
<span class="requiredSmall">*</span>
<select class="Sitedropdown" style="width: 220px;"
ng-model="selectedSpecimen().serviceID"
ng-options="service.ServiceID as service.ServiceName for service in services">
<option value="" ng-selected="selected">Select Service</option>
</select>
</td>
Valid means:
Valid values can be anything but "Select Service", it is my default value. Like other ASP.net Require field validator DefaultValue="0" for dropdown, so here My dropdown will be bound from the services and I want to select all other values except "Select Service".
You need to add a name attribute to your dropdown list, then you need to add a required attribute, and then you can reference the error using myForm.[input name].$error.required:
HTML:
<form name="myForm" ng-controller="Ctrl" ng-submit="save(myForm)" novalidate>
<input type="text" name="txtServiceName" ng-model="ServiceName" required>
<span ng-show="myForm.txtServiceName.$error.required">Enter Service Name</span>
<br/>
<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required>
<option value="">Select Service</option>
</select>
<span ng-show="myForm.service_id.$error.required">Select service</span>
</form>
Controller:
function Ctrl($scope) {
$scope.services = [
{ServiceID: 1, ServiceName: 'Service1'},
{ServiceID: 2, ServiceName: 'Service2'},
{ServiceID: 3, ServiceName: 'Service3'}
];
$scope.save = function(myForm) {
console.log('Selected Value: '+ myForm.service_id.$modelValue);
alert('Data Saved! without validate');
};
}
Here's a working plunker.
Related
How to get value from an angular form (ng-model type select dropdown field) for an interdependent select field for countries->states->cities, into a PHP variable or php page? I am a newbie in angular js and have no idea how to integrate angular js in a PHP project. I am sharing the code below for your reference. Thanks in advance.
<div ng-controller="CountryCntrl_p" class="field-wrapper">
<label for="candidate_country" class="label11">Country</label>
<select id="country" class="form-element" ng-model="states" name="candidate_country1" ng-options="country for (country, states) in countries track by country" required>
<?php
foreach($countries as $country)
{
echo('<option value='.$country['id'].'>'.$country['name'].'</option>');
}
?>
</select>
<div ng-show="states" class="w-100">
<div class="field-wrapper">
<label for="candidate_states" class="label11">States</label>
<select id="state" class="form-element" ng-disabled="!states" name="candidate_states1" ng-model="cities" ng-options="state for (state,city) in states" required>
<?php echo('<option value="" selected>Selected:'.$perAddress['pState'].'</option>');?>
</select>
</div>
</div>
<div ng-show="cities" class="w-100">
<div class="field-wrapper">
<label for="candidate_district" class="label11">District</label>
<select id="city" class="form-element" name="candidate_district1" ng-disabled="!cities || !states" ng-model="city" required>
<?php echo('<option value="" selected>'.$perAddress['pDistrict'].'</option>');?>
<option ng-repeat="city in cities" value='{{city}}'>{{city}}</option>
</select>
</div>
</div>
</div>
I tried to get the value using the POST function in the target page but it shows NULL for the array whereas I do get the correct value for city and country without any issue.
Angularjs happens in the browser. PHP happens at the server. You are mixing the 2 here incorrectly. With AngularJS you want to have only HTML in your HTML page. Use the controller and a service to load the data into your controller. The HTML will access variables in your $scope.
For example lets look at your select element. You are almost correctly setting up the HTML, but notice how I changed your ng-options :
<select id="state" class="form-element"
ng-disabled="!states" name="candidate_states1"
ng-model="cities" ng-options="state.city as state.state for state in states"
required>
</select>
Looks great (notice I removed the PHP code) and is ready to process an object $scope.states.
Lets say you have a script on your server /data.php that, when queried, will echo this JSON - which your javascript will receive and parse.
$states = array(array("state" => "California", "city" => "Valencia"),
array("state" => "Idaho", "city" => "Boise"),
array("city" => "Manhattan", "state" => "New York"));
echo json_encode(array("states" => $states));
Its best practices to separate your ajax calls into a service, but for simplicity, you can do it in your controller. In your controller CountryCntrl_p you can do something like this:
...
$http({
method: "get",
url: "https://my-php-page.com/data.php"
}).then(function(data) {
$scope.states = data.states
});
....
Which should turn itself into the following states array. This snippet shows an example that might help. Here I have hardcoded the states array to show you how the data should be structured, but in reality this will be coming from your PHP.
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.states = [{
city: "Valencia",
state: "California"
}, {
city: "Boise",
state: "Idaho"
}, {
city: "Manhattan",
state: "New York"
}]
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="selectExample">
<div ng-controller="ExampleController">
<select id="state" class="form-element" ng-disabled="!states" name="candidate_states1" ng-model="cities" ng-options="state.city as state.state for state in states" required>
</select>
<hr>
<p ng-if="!cities">Select a state to see the city</p>
<p ng-if="cities">{{cities}}</p>
</div>
</div>
I have an array of objects:
data: function() {
return {
customers:[],
}
},
that populates this select box:
<label>DSO Affiliation:</label>
<select class="select-box form-control" name="customer" id="customer" v-model='customer_id' style="-webkit-appearance: none;">
<option value="" selected>Choose Customer</option>
<option v-for="customer in customers" :value="customer.id">
{{ customer.customer_name }}
</option>
</select>
Once a customer is selected I need to get the customer data from the selected object so that I can populate other form elements such as:
<label>Customer Address:</label>
<input type="text" class="form-control" name="cust_address" v-model='cust_address'>
I have the data in the customers:[ ] array. How do I get the customer data that was was selected in the select box without an additional trip to the server?
Watch the customer_id and update cust_address by filtering the customers array :
data: function() {
return {
customers:[],
}
},
watch:{
customer_id(val){
let found=this.customers.find(cust=>cust.id===val);
this.cust_address=found?found.address:'';
}
}
Basically I have this selection with some input fields:
<div class="form-row">
<div class="form-group col-lg-6">
<label>Città *</label>
<select formControlName='cittaLegale' class="form-control" id="citta_legale"
name="citta_legale" required>
<option value="" disabled selected> Scegli </option>
<option *ngFor="let comune of comuni" value="" > {{comune.Comune}}</option>
</select>
</div>
<div class="form-group col-lg-4">
<label>Provincia*</label>
<input formControlName='provinciaLegale' type="text" class="form-control"
id="provincia_legale" name="provincia_legale"
placeholder="Es.RM" value='' required maxlength="2" style="text-
transform:uppercase" >
</div>
So I did a ngFor to get all Comune from a JSON file and I need to autocomplete the input provinciaLegale (Provincia) based on I choosing the select.
This is my function to get JSON file:
listaComuni(){
this.http.get("assets/it.json").subscribe(data=>{
this.comuni = data;
})
and this is part of the JSON file:
[
{
"Istat": "028001",
"Comune": "Abano Terme",
"Provincia": "PD",
"Regione": "VEN",
"Prefisso": "049",
"CAP": 35031,
"CodFisco": "A001",
"Abitanti": 19726,
},
]
So you want to select the option and set it's value to the ProvinciaLegale input?
You could add a valueChanges hook (inside your ngOnInit()) to cittaLegale select formControl, like this:
this.formGroup.get('cittaLegale').valueChanges.subscribe(newValue => {
this.formGroup.get('provinciaLegale').setValue(newValue);
});
I am using the bootstrap combobox with search which is working fine when populated with static options as follows:
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control" style="display: none;">
<option value="" selected="selected">Type Planet name...</option>
<option value="0">Mercury</option>
<option value="1">Earth</option>
<option value="2">Venus</option>
<option value="3">Mars</option>
<option value="4">Jupiter</option>
</select>
</div>
</form>
I want to load the options dynamically from an array. i tried ng-options and ng-repeat but the values are not coming inside the combo box. I will prefer using javascript.
Tried option:
<select class="combobox input-large form-control" style="display: none;"
ng-model="PlanetData.selectedPlanet">
option value="" selected="selected">Type for Planet...</option>
<option ng-repeat="planet in PlanetData.availablePlanets" value=" {{planet.id}}">{{planet.planetName}}</option>
THis creates the combobox with the text "Type for channel", but the planetdata does not appear in the the combobox options rather it appears below it. I want to know how to bind the two so that the data comes in the combobox.
The problem is that when the combobox function is called the ng-repeat or the ngOptions didn't rendered the options yet.
One quick way to fix this is call the $('.combobox').combobox() inside a $timeout callback.
$scope.items = [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}];
$timeout(() =>
$('.combobox').combobox(), 0);
See the plunker with this example: https://plnkr.co/edit/j25lasvpHxmMNUjl7EjE?p=preview
I tested with ngRepeat and ngOptions.
var planet = ['Mercury','Mercury1'];
$.each(planet, function(index, value){
$('.combobox').append('<option value="'+index+'">'+value+'</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control">
</select>
</div>
</form>
The issue was because of the ng-options or ng-repeat not getting rendered when the combobox was appearing. Refer to the answer from Rafael, it has all the necessary details. I used the timeout as he suggested and it worked like a charm.
$timeout(() =>
$('.combobox').combobox(), 100);
I am doing error validation in Angular as follows.
<select ng-model = "$parent.color" class = "form-control"
ng-options = "color as color for color in $parent.colors" required>
<option value="">Choose an option</option>
</select>
<span ng-show="serviceForm.$parent.color.$error.required"> My custom error message </span>
The error validation message never shows up. How to fix this?
Did you include the ngRequire module ?
ngRequire
<script>
angular.module('ngRequiredExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.required = true;
}]);
</script>
<div ng-controller="ExampleController">
<form name="form">
<label for="required">Toggle required: </label>
<input type="checkbox" ng-model="required" id="required" />
<br>
<label for="input">This input must be filled if `required` is true:</label>
<input type="text" ng-model="model" id="input" name="input" ng-required="required" /> <br>
<hr>
required error set? = <code>{{form.input.$error.required}}</code><br>
model = <code>{{model}}</code>
Try this if it works.
Your code can be like to this to work properly.
<form name="form1">
<select name="select" ng-model = "$parent.color" class = "form-control"
ng-options = "color as color for color in $parent.colors" required>
<option value="">Choose an option</option>
</select>
<span ng-show="form1.select.$error.required"> My custom error message </span>
</form>
You are not flowing FormController. View this link