klaydze klaydze - 9 days ago 4
AngularJS Question

Ng-class with condition in AngularJS

I have the below popup where the user can encode item information.

enter image description here

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>&nbsp;</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

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