Ng-class with condition in AngularJS - html

Question

I have the below popup where the user can encode item information.
My requirement is that, when Foreign Currency and Conversion Rate are both have values, it should multiply Foreign Currency * Conversion Rate to get the Amount. And when both Foreign Currency and Conversion Rate are 0, then Amount field should accept user input.
Currently, I have the below HTML.
<div class="form-group" show-errors>
<label for="foreignCurrency" class="control-label col-md-3 text-muted">Foreign Currency</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar fa-lg"></i> </span>
<input type="number" id="foreignCurrency" name="foreignCurrency" class="form-control" placeholder="Foreign Currency" ng-model="vm.newItem.newItemEnt.ForeignCurrency" value="{{vm.newItem.newItemEnt.ForeignCurrency || 0}}" min="0" />
</div>
<p class="help-block" ng-if="perksFrm.foreignCurrency.$error.min">The minimum foreign currency value is 0</p>
</div>
<div class="form-group" show-errors>
<label for="convRate" class="control-label col-md-3 text-muted">Conversion Rate</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money"></i></span>
<input type="number" id="convRate" name="convRate" class="form-control" placeholder="Conversion Rate" ng-model="vm.newItem.newItemEnt.ConversionRate" ng-required="vm.newItem.newItemEnt.ForeignCurrency" value="{{vm.newItem.newItemEnt.ConversionRate || 0}}" min="0" />
</div>
<p class="help-block" ng-if="perksFrm.convRate.$error.required">The conversion rate is required</p>
<p class="help-block" ng-if="perksFrm.convRate.$error.min">The minimum conversion rate is 0</p>
</div>
<div class="form-group" show-errors>
<label for="amount" class="control-label col-md-3 text-muted">Amount</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money"></i></span>
<input type="number" id="amount" name="amount" class="form-control" placeholder="Amount" ng-model="vm.newItem.newItemEnt.Amount" required />
</div>
<p class="help-block" ng-if="perksFrm.amount.$error.required">The first name is required</p>
</div>
In Amount html, I can do it like this {{vm.newItem.newItemEnt.ForeignCurrency * vm.newItem.newItemEnt.ConversionRate}}. But, what if they have a 0 value and my requirement is to accept the user input from Amount textbox.
Any advise to achieve my requirements?
TIA

Answer 1

According to your requirment, I tried to provide you answer.
Please find Code for this, also JS fiddle demo.
HTML
<style>
.error{
border-color:red;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-lg-2">Foreign Currency</div>
<div class="col-lg-2"><input type="number" ng-model="FCurrency" /></div>
</div>
<div class="row">
<div class="col-lg-2">Rate</div>
<div class="col-lg-2"><input type="number" ng-model="Rate" /></div>
</div>
<div class="row">
<div class="col-lg-2">Amount</div>
<div class="col-lg-2"><input ng-class="{error : RateAmount <= 0}" ng-disabled="isAmountDisable"
type="number" ng-model="RateAmount" /></div>
</div>
</div>
JS
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function ($scope) {
$scope.RateAmount = 0;
$scope.isAmountDisable = false;
function setRateAmount() {
if ($scope.FCurrency > 0 && $scope.Rate > 0) {
$scope.RateAmount = ($scope.FCurrency * $scope.Rate);
$scope.isAmountDisable = true;
}
else {
$scope.RateAmount = 0;
$scope.isAmountDisable = false;
}
}
$scope.$watch('FCurrency', function (newval, oldval) {
setRateAmount();
});
$scope.$watch('Rate', function (newval, oldval) {
setRateAmount();
});
});
JS Fiddle Demo

Answer 2

Did you tried to use ng-change on foreignCurrency and convRate input.
when those input change you can calcul your amount value and disable it.
if they are both 0, you can enable it.
Something like this :
function change() {
var foreignCurrency = vm.newItem.newItemEnt.ForeignCurrency;
var conversionRate = vm.newItem.newItemEnt.ConversionRate;
if (foreignCurrency === 0 && conversionRate === 0) {
vm.enableAmout = true;
} else {
vm.enableAmout = false;
vm.vm.newItem.newItemEnt.Amount = foreignCurrency * conversionRate;
}
}