This question already asked but that is not solving my issue.
I want to enable and disable text-area when drop-down change. I tried some code but showing error.
TypeError: Cannot set property 'disabled' of undefined
at Scope.$scope.firstUsageChange (addcoupon.js:130)
addcoupon.html
<div class="col-sm-4">
<label>First Usage<code>*</code></label>
<select class="form-control" name="first_usage" ng-model="formData.first_usage" ng-change="firstUsageChange()" ng-required="true">
<option value="">Select First Usage</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="col-sm-4">
<label>First Usage Title<code>*</code></label>
<textarea class="form-control" name="first_usage_title" ng-model="formData.first_usage_title" ng-disabled="disabled" ng-required="true"></textarea>
</div>
addcoupon.js
$scope.firstUsageChange = function () {
$scope.result = $scope.formData.first_usage;
if($scope.result == 'yes')
{
$scope.first_usage_title.disabled= false;
}
else
{
$scope.first_usage_title.disabled= true;
}
//console.log();
};
in the html part:
<textarea class="form-control" name="first_usage_title" ng-
model="formData.first_usage_title" ng-disabled="disabled" ng-required="true">
</textarea>
try changing ng-disabled by:
ng-disabled="first_usage_title.disabled"
I got the result i just change $scope data $scope.disabled = true;
$scope.firstUsageChange = function () {
$scope.result = $scope.formData.first_usage;
if($scope.result == 'yes')
{
$scope.disabled = true;
}
else
{
$scope.disabled = false;
}
};
Related
I have a problem on my code. After submitting the form I have a function for validation checking but it seems that the condition on my function won't identify my form name. Here's my code:
Template form part:
<div class="modal-body">
<form name="form.addeditcoursewareModal">
<div class="row">
<div class="small-12 medium-12 large-12 columns">
<label class="stacked">
Question
<input name="question" type="text" class="form-field" placeholder="Question" ng-model="$ctrl.question.data.attributes.question" >
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 large-6 columns">
<label class="stacked">
Question Type: {{ $ctrl.question.data.attributes.question_type }}
<select name="question_type" class="form-field" id="questionType" ng-model="$ctrl.question.data.attributes.question_type" ng-change="$ctrl.getSelectedQuestionType()">
<option value="single">Single</option>
<option value="multiple">Multiple</option>
<option value="true_or_false">True or False</option>
<option value="free_text">Free Text</option>
</select>
</label>
</div>
Validation part:
validateForm(){
this.validatingForm = true;
if (this.question.data.attributes.question_type === 'true_or_false'){
this.question.data.attributes.choices.data[0].attributes.choice = 'True';
this.question.data.attributes.choices.data[1].attributes.choice = 'False';
}
if (this.modalOptions.actionType == 'duplicate'){
this.question.data.attributes.choices.data.forEach((value) => {
delete value.id;
});
}
if (this.modalOptions.type === 'multiple'){
this.validateCheckbox();
}
console.log(this);
if (this.form.addeditcoursewareModal.$invalid || this.invalidMultiple) { // ERROR DETECTED
// Check for an invalid field
angular.forEach(this.form.addeditcoursewareModal.$error, (field) => {
angular.forEach(field, (errorField) => {
if (errorField.$name === 'dynamicForm'){
errorField.dynamicInput.$setTouched();
} else {
// Set field as touched to display invalid field message
if (errorField.$name === 'single') {
this.invalidRadio = true;
}
errorField.$setTouched();
}
});
});
this.validatingForm = false;
} else {
Here's the error I got:
angular.js:14791 TypeError: Cannot read property 'addeditcoursewareModal' of undefined
I already tried renaming my form but the error is the same.
It seems that you are using the controller as syntax. You would need to add $ctrl in front of form.addeditcoursewareModal.
<form name="$ctrl.form.addeditcoursewareModal">
I do not have enough English to describe it, but I think you will understand it from the codes.
Basically my problem is that ng-model = "" ng-options = "" does not come up with form data when used together.
<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState()" >
<option value="">Select Car</option>
</select>
The selection box for the brands of these cars
<div class="form-group">
<label class="mtb10">Model Year</label>
<input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
</div>
This is the other form objects. Where ng-model is a different data "data." I can get it. How can I get the value in the selection box.
I need to get the "car_id" value.
Try this :
On change of the dropdown options pass the selected value into the function as a param.
Use array.filter() method to fetch the model year for the selected car based on the car id.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.CarList = [
{
"car_brand_code": 1,
"car_brand_name": "Maruti",
"model_year": 1990
},
{
"car_brand_code": 2,
"car_brand_name": "Ford",
"model_year": 2005
}
];
$scope.GetState = function(carId) {
var selectedCar = $scope.CarList.filter(function(item) {
return item.car_brand_code == carId;
});
$scope.data = {
"modelYear" : selectedCar[0].model_year
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState(car_id)" >
<option value="">Select Car</option>
</select>
<div class="form-group">
<label class="mtb10">Model Year</label>
<input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
</div>
</div>
I am developing Angular JS application and I want to make a select option like below.
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="1" selected="selected">Active</option>
<option value="0" selected="">Inactive</option>
</select>
I want to make active when the ng-model rc.status becomes 1 and inactive when 0.
How can I do that without doing ng-repeat.
Because I generating this view from laravel and binding the html with Angular js
Here is example that select dropdown value as per rc.status
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="--Select--">--Select--</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
<br><br>
<div>Status : {{rc.status}}</div>
</div>
This might help getting the select changed.
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="1" ng-selected="rc.status == 1">Active</option>
<option value="0" ng-selected="rc.status == 0">Inactive</option>
</select>
Try to use a controller to do that :
For exmple :
OneCtrl init the status at 1 and watch them to change the select item
app.controller('OneCtrl', function($scope) {
$scope.status = 1;
$scope.$watch('status', function () {
if($scope.status == 1){
$scope.statusSelected= '0';
}if($scope.status == 2){
$scope.statusSelected= '1';
}
});
// Change status value
$scope.status1 = function () {
$scope.status = 1;
}
$scope.status2 = function () {
$scope.status = 2;
}
});
view :
<select name="" ng-model="statusSelected">
<option value="0">Active</option>
<option value="1">Inactive</option>
</select> <br>
<button ng-click="status1()">Status 1</button>
<button ng-click="status2()">Status 2</button>
Hope that helps.
Need to Filter options in dropdown based on manufacturers (make). Need to filter models based on selected make option via "ng-model:make"
HTML:
<div class="form-group">
<label for="make">Make</label>
<select class="form-control" data-ng-model="make" data-ng-options="maker.make for maker in makers" required></select>
</div>
<div class="form-group">
<label for="make">Make</label>
<select class="form-control" data-ng-model="make" data-ng-options="maker.make for maker in makers" required></select>
</div>
<div class="form-group">
<label for="model">Model</label>
<select class="form-control" data-ng-model="model" data-ng-options="availabledevice.model for availabledevice in availabledevices|filter:make" required></select>
</div>
Services from factory:
deviceassign.factory("manufacturersoptionsservice", function($http) {
var devicemakers = {};
devicemakers.values = function() {
return $http.get('api/displaymanufacturersapi.php');
}
return devicemakers;
});
deviceassign.factory("availabledeviceservice", function($http) {
var availabledevice = {};
availabledevice.details = function() {
return $http.get('api/displayavailabledevicesforoptionsapi.php');
}
return availabledevice;
});
Controller:
deviceassign.controller('assigndevicecontroller', function($scope, growl, manufacturersoptionsservice, availabledeviceservice) {
manufacturersoptionsservice.values().success(function(response1) {
$scope.makers = response1;
});
availabledeviceservice.details().success(function(response3) {
$scope.availabledevices = response3;
});
// ...
});
Its working now.Had to select make.make as make itself is an object in JSON
<select class="form-control" data-ng-model="model" data-ng-options="availabledevice.model for availabledevice in availabledevices|filter:make.make" required></select>
I have a field country. Some countries in the list like the US or Canada are divided into states. When such countries are selected, a second select appears and is required.
HTML:
<label>Country*</label>
<select name="country" class="gu3" ng-model="companyCriteria.country" ng-options="country.label for country in countries" required=""></select>
<div class="row" ng-show="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" required="">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
Controller:
app.controller('CompanyController', function ( $scope, companies , Countries, States ... ) {
//...
$scope.countries = Countries;
$scope.states = [];
$scope.stateAvailable = false;
$scope.$watch( 'companyCriteria.country', function( after, before ) {
if ( searchCompanyCriteria.country && searchCompanyCriteria.country.div ) {
$scope.states = States.get( after.code );
$scope.stateAvailable = true;
} else {
$scope.states = [];
$scope.stateAvailable = false;
}
} );
$scope.search = function () {
if ( !$scope.companyForm.$valid ) return; //Returns when states are hidden
//Do search ...
};
the problem is that $scope.companyForm.$valid is false when the state select is hidden. I'm not sure how to proceed to code it in an angular and elegant way (without having to hack with the dom the jquery way).
Note: Angular v1.2.0-rc.3
Instead of ng-show use ng-if (assuming you're using angular 1.1.5 or higher):
<div class="row" ng-if="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" required>
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
Or, just use ng-required:
<select name="state" ng-model="companyCriteria.state" ng-required="stateAvailable">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
You can use ng-required to resolve an angular expression and set the field to required:
<label>Country*</label>
<select name="country" class="gu3" ng-model="companyCriteria.country" ng-options="country.label for country in countries" required=""></select>
<div class="row" ng-show="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" ng-required="companyCriteria.country">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
This will only require the state, if the country has been set with a value. However, you can put in any scoped expression here (so if you want to call a controller function returning a boolean, that would work as well).
The documentation for ng-required is here.