When a user inputs data into an input field, it must fall within the range of values retrieved from the database. The value entered by the user should meet either the minimum, maximum, or default value obtained from the database. For instance, if the minimum value retrieved from the database is 4500.25, any input below that amount should trigger an error message (similar to ng-messages).
View
https://i.sstatic.net/4ange.png
HTML
<div class="form-group">
<label>Loan Amount</label>
<div class="input-group">
<input blur-to-currency type="text" class="form-control" name="loan_amount" ng-model="loan.loan_amount" ng-pattern="/(^(1{0,1}|([1-9][0-9]*))(\.[0-9]{1,4})?$)/" min="{{productDetails.minimum_amt}}" required>
<span class="input-group-addon">JMD</span>
</div>
<span class="tiny">Min: {{productDetails.minimum_amt | currency}}</span>
<span class="tiny">Max: {{productDetails.maximum_amt | currency}}</span>
<span class="tiny">Default: {{productDetails.default_amt | currency}}</span>
<div ng-messages="newLoanForm.loan_amount.$error" ng-if="newLoanForm.loan_amount.$dirty">
<div ng-message="required">
<span class="error-msgs">Please enter a loan amount</span>
</div>
<div ng-message="pattern">
<span class="error-msgs">Loan amount must be a numerical value</span>
</div>
</div>
</div>
Object Literal
https://i.sstatic.net/spfW0.png
In the above HTML, using min does not work and ng-minlength is also ineffective. I am seeking assistance in possibly creating a directive or implementing another solution to achieve the desired outcome. Thank you in advance.