How to hide field and use ng-model for Rest Service? - javascript

I have field that i want to hide permanently from the view but i want to use ng-model for Rest Service to do some calculation for other fields. How to achieve that task using AngularJS ?
So far tried code...
main.html
<div class="form-group col-md-6" ng-disabled="disableEffComp" ng-hide="true">
<div>
<label class="control-label" for="controlEffect">Overall
Control Effectiveness Computed</label>
</div>
<select kendo-drop-down-list k-data-value-field="'id'"
k-data-text-field="'text'" k-option-label="'Select'"
k-data-source="ctrlEffOptions"
ng-model-options="{ updateOn: 'blur' }"
ng-model="processRating.controlEffectivenessRatingComputeKey"
readOnly="compReadOnly" id="controlEffect">
</select>
</div>
mainCtrl.js
$scope.overrideBusinessDec = function () {
if ($scope.processRating.controlEffectivenessRatingComputeKey && $scope.processRating.controlEffectivenessRatingOverrideKey !== $scope.processRating.controlEffectivenessRatingComputeKey) {
Rating.getProcessRatingFields($scope.processRating.controlEffectivenessRatingOverrideKey, $scope.processRating.finalOutcomeInherentRiskRatingKey).then(function (response) {
$scope.processRating.residualRiskRatingComputeKey = response.data.residualRiskRatingComputeKey;
$scope.processRating.residualRiskRatingOverrideKey = response.data.residualRiskRatingComputeKey;
$scope.riskBusinessOptions = response.data.residualRiskOverride;
});
}
};

Related

How can I include ng-model in autocomplete spring-boot?

In consultation mode I cannot return the dto values in the ng-model:
HTML code:
<div class="form-group">
<label class="col-md-5 control-label"> Localité </label>
<div class="col-md-7">
<autocomplete ng-disabled="mode == 'read'"
input-class="form control" options="referentielAdresses"
display-property="localite" on-type="autoCompleteLocalite"
on-select="get-localite" clear-input="false"
ng-model="dto.localite"></autocomplete>
</div>
</div>
https://imgur.com/iQMOvxk
JS code:
// autoCompleteLocalite
$scope.autoCompleteLocalite = function(typed){
if(typed!=""){
$scope.dto.localiteRnvp = typed;
}
};
$scope.getLocalite = function(selected){
$scope.dto.localiteRnvp = selected.localite;
}
How can I include ng-model midst autocomplete?
Em... in $scope.getLocalite search for relative rows and show them into new block. On click on row update localiteRnvp value.

Angularjs ng-if with required field validation

Hi I am developing one web application in angularjs. I have one checkbox and very next i have one dropdown. If i check checkbox then i want to make dropdown required. Wheneer i do following,
I click on checkbox-dropdown required validation will occur.
Whenever i uncheck on checkbox still my required validation will occur. I want to make required validation for dropdown only when checkbox is checked.
Below is my checkbox.
<div class="inputblock">
<label class="inputblock-label">{{ 'Military' | translate }}</label>
<label class="military">{{ 'Military' | translate }}</label>
<input type="checkbox" name="Military" placeholder="{{ 'Military' | translate }}" ng-model="Military" ng-change="statechanged(Military)">
</div>
Below is my dropdown.
<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}">
<label class="inputblock-label">{{ 'Rank' | translate }}</label>
<div ng-if="rankrequired==true">
<span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
</div>
<select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" required>
<option value="" label="rank">{{ 'Rank' | translate }}</option>
</select>
</div>
Below is my javascript code.
$scope.statechanged = function (Military) {
if (Military == true)
{
enablerankdropdown();
$scope.rankrequired = function () {
return true;
};
}
else
{
$scope.user.rank = $scope.rankList[0].value;
disablerankdropdown();
$scope.rankrequired = function () {
return false;
};
}
}
Whenever i uncheck the checkbox i dont want to have required field validator. Now i am getting required field validator after unchecking also. May i know why this is happening here? May i get some help in order to fix the above issue? Any help would be appreciated. Thank you.
You can use ng-required to achieve this. Assign the ng-model of your checkbox to ng-required of select.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<input type="checkbox" name="user" ng-model="user">
<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required ng-required="user">
<option value="">Select Service</option>
</select>
<span style="color:red" ng-show="myForm.service_id.$error.required">Select service</span>
<input type="submit"
ng-disabled="
myForm.service_id.$dirty && myForm.service_id.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.services = [
{ServiceID: 1, ServiceName: 'Service1'},
{ServiceID: 2, ServiceName: 'Service2'},
{ServiceID: 3, ServiceName: 'Service3'}
];
});
</script>
</body>
</html>
You can use ng-required="Military".
<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}">
<label class="inputblock-label">{{ 'Rank' | translate }}</label>
<div ng-if="rankrequired==true">
<span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
</div>
<select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" ng-required="Military">
<option value="" label="rank">{{ 'Rank' | translate }}</option>
</select>
</div>

How to enable disable a select drop down list using radio buttons with angularjs?

I have been searching all over for the internet looking on how to enable or disable this drop down list using radio buttons specifically when the radio button value is equal to prof the drop down list should be disabled, but with no help. I did come up with an example but didn't work. Any help would be appreciated.
registration.html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
//This is the drop down that I need to diable
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
This is the code I implemented to work above scenario. But didn't work :(
regController.js
$scope.$watch('QualificationDetails.qualicication_type', function (QualiType) {
if (angular.isUndefined($scope.QualificationDetails)) {
return;
}
if (QualiType === 'prof') {
$scope.QualificationDetails.qualification_type = $scope.QualiType;
}
else {
if ($scope.QualificationDetails.qualification_type !== null) {
$scope.QualiType = $scope.QualificationDetails.qualification_type;
$scope.QualificationDetails.qualification_type = null;
}
}
});
the above scenario is that when it comes to qualifications if qualification type is equal to professional (prof) drop down list is disabled and when it is educational the drop down list should be enabled. Any idea on how to achieve this.
This is the Quality level json. I get it through the qualitylevel.service.
(function initController() {
deptService.getdepts(function (res) {
$scope.depts = JSON.parse(res.data);
});
qualiService.getquali(function (res) {
console.log("inside ");
$scope.qualiLevel = JSON.parse(res.data);
});
console.log("inside service");
})();
It seems to me, that your code works fine without watcher you have added. I hope I understood what you want correctly. Try this snippet:
angular
.module('app', [])
.controller('Ctrl', function($scope) {
$scope.qualiLevel = [
{quali_level: 'A', qualification_id: 1},
{quali_level: 'B', qualification_id: 2}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
</div>
</div>
As the control is radiobutton, your QualificationDetails.qualification_type value will be set to 1 or 0 and not to the label value. You have to have different variables for two radio buttons. Based on their value you have to set QualificationDetails.qualification_type = 'prof' or something
You can also try $parent.QualificationDetails.qualification_type instead as answered in How can I get the value of the checked radio button when submitting a form using angularjs?
Thanks everyone for helping me out. Just felt wanted to show I implemented it correctly and other programmers to increase their knowledge. Using $watch to temporaly hide the drop down list details).
the registrationController.js
$scope.$watch('QualificationDetails.qualification_type', function (Val) {
if (angular.isUndefined($scope.QualificationDetails))
return;
if (Val !== 'prof') {
$scope.QualificationDetails.qualification = $scope.tempValue;
}
else {
if ($scope.QualificationDetails.qualification !== null) {
$scope.tempValue = $scope.QualificationDetails.qualification;
$scope.QualificationDetails.qualification = null;
}
}
});
Implemented through this example.

How to clear the data in the form when dropdown value changed using AngularJS?

I am using AngularJS ng-change directive, I want to clear the data in the form for some fields when ng-change invoke , how i can achieve this task using this approach.
So far i have tried below code...
HTML
<div class="form-group col-md-6" ng-show="showEditdisForm">
<div>
<label class="control-label" for="controlEffBusiness">Overall
Control Effectiveness Business</label>
</div>
<div>
<select kendo-drop-down-list k-data-value-field="'id'"
k-data-text-field="'text'" k-option-label="'Select'"
k-data-source="ctrlEffOptions"
ng-model-options="{ updateOn: 'blur' }"
ng-model="processRating.controlEffectivenessRatingOverrideKey" ng-change="overrideBusinessDec(processRating.controlEffectivenessRatingComputeKey)"></select>
</div>
</div>
</div>
<div class="row" ng-show="OverrideComments" ng-class="{'has-error': processRatingForm.OverallBusComment.$dirty && processRatingForm.OverallBusComment.$invalid, 'has-success': processRatingForm.OverallBusComment.$valid}">
<div class="form-group col-md-6">
<label class="control-label" for="controlEffBusiness">
Overall Control Effectiveness Business Comments</label>
</div>
<div class="col-md-10">
<textarea rows="2" class="form-control"
ng-pattern="/^[a-zA-Z0-9_ ]*$/"
required
id="OverallBusComment"
name="OverallBusComment"
ng-model-options="{ updateOn: 'blur' }"
data-required-msg="Overall Control Busniess comment is required"
ng-model="processRating.overallControlEffectivenessOverrideText"></textarea>
</div>
</div>
CTRL.JS
$scope.resetData = function (){
$scope.processRating.overallControlEffectivenessOverrideText = '';
$scope.processRating.residualRiskRatingOverrideKey ='';
$scope.processRating.residualRatingText = '';
}
$scope.overrideBusinessDec = function() {
$scope.OverrideComments = true;
if (!($scope.processRating.controlEffectivenessRatingOverrideKey == $scope.processRating)) {
Rating.getProcessRatingFields($scope.processRating.inherentRiskRatingKey,$scope.processRating.controlEffectivenessRatingComputeKey).then(function (response){
$scope.processRatingFields = response.data;
$scope.resetData();
})
} else {
$scope.OverrideComments = false;
}
};
Since you're inside a promise result, you need to call $scope.$apply to make your changes effective.
Rating.getProcessRatingFields($scope.processRating.inherentRiskRatingKey, $scope.processRating.controlEffectivenessRatingComputeKey).then(function (response) {
$scope.$apply(function() {
$scope.processRatingFields = response.data;
$scope.resetData();
});
});

How to use ng-change of AngularJS?

I am populating values in dropdown in below html code , if user change dropdown i want to use ng-show and display text area so user can enter comments , How i can achieve that using AngualrJS directive ng-change.
So far tired this...
HTML
<form kendo-validator="ratingValidator" name="processRatingForm"
novalidate ng-cloak ng-controller="EditProcessRatingCtrl"
class="border-box-sizing grids-fonts">
<p class="status">{{PrcsratingValidationMsg}}</p>
<div class="row">
<div class="form-group col-md-6" ng-show="showEditdisForm">
<div>
<label class="control-label" for="controlEffBusiness">Overall
Control Effectiveness Business</label>
</div>
<div>
<select kendo-drop-down-list k-data-value-field="'id'"
k-data-text-field="'text'" k-option-label="'Select'"
k-data-source="ctrlEffOptions"
ng-model-options="{ updateOn: 'blur' }"
ng-model="processRating.controlEffectivenessRatingOverrideKey" ng-change="overrideBusinessDec()"></select>
</div>
</div>
</div>
<div class="row" ng-show="OverrideComments">
<div class="form-group col-md-6">
<label class="control-label" for="controlEffBusiness">
Overall Control Effectiveness Business Comments</label>
</div>
<div class="col-md-10" kendo-validator="overrideCommentValidator">
<textarea rows="2" class="form-control" required
data-required-msg="Business override justification is required"
ng-model="processRating.overallControlEffectivenessOverrideText"></textarea>
</div>
</div>
CTRL.JS
$scope.riskDirOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RSK_DIR");
$scope.riskBusinessOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RR");
$scope.ctrlEffOptions = kendoCustomDataSource.getDropDownDataSource("CTL_EFCTVNS_RT");
$scope.disableEffComp = true;
$scope.compReadOnly = true;
//Edit Function broadcast from parent Ctrl
$scope.$on('editProcessRating', function() {
$scope.showEditdisForm = true;
$scope.ProcessRatingWin.open().center();
if($scope.processRating.inherentRiskRatingKey === null || $scope.processRating.finalOutcomeInherentRiskRatingKey === null
|| $scope.processRating.controlEffectivenessRatingComputeKey === null) {
$scope.showEditdisForm = false;
$scope.PrcsratingValidationMsg = '*All Computed values are required*';
} else {
return true;
}
});
//Edit Save Functionality
$scope.saveProcessRating = function() {
Rating.saveProcessRating($scope.processRating).then(function(){
$rootScope.$broadcast("refreshRatingGrid");
$scope.ProcessRatingWin.close();
});
}
$scope.overrideBusinessDec = function() {
if (!($scope.processRating.controlEffectivenessRatingOverrideKey !==null)) {
$scope.OverrideComments = true;
} else {
$scope.OverrideComments = false;
}
};
$scope.closeModal = function() {
$scope.ProcessRatingWin.close();
};
Not exactly sure what you want. But this is a simple implementation of ng-change
Here is the HTML
<select data-ng-model="valueSelected"
ng-options="opt as opt.label for opt in options" ng-change="handleChange()">
</select>
Here is the .js file
app.controller('settingsCtrl',function($scope) {
$scope.handleChange = function(){
console.log(valueSelected);
}
});
The scope.handleChange will be executed every time there is a change in the dropdown.
and In your HTML try using 'ng-if' in place of 'ng-show'.
I am not sure if the scope variables you declared in the ng-change function are updated try to use a watch if needed.
Hope this will also help for your reference getting the ng-object selected with ng-change
hope it helps ! :)

Categories