Consider an HTML input form with red error text that informs when field is empty. Notice it relies on ng-show=$error.required && $touched
<div class="form-group">
<div class="input-group">
<input id="qp-cargo-value" name="qpCargo" placeholder="$" type="text"
class="form-group" currency="229" data-ng-model="cargoValue" required>
</div>
<div class="rederrorlabel"
ng-show="myform.qpCargo.$error.required && myform.qpCargo.$touched">
Error - Cargo value is required
</div>
</div>
It works fine for fields without the ccy attribute. But for inputs with ccy, when the input is empty the default value stored in angular is not null but $, which fails to trip the $error.required condition
Here is console output for the value as I enter and then delete values, confirming that it never gets set to null but rather to "$".
Is there anyway to retain the ccy formatting but somehow still use $error.requried in an input field?
the standard seems to be to have an input prepend for $ and only take in the amount not the symbol.
Bootstrap EX:
If you prefer to leave it the way it is, you can write a method that checks for a valid entry returning a bool and use it for the ng-show.
public currencyValidation(): boolean {
return myform.qpcargo.value.replace('$', "").length < 1;
}
<div class="form-group">
<div class="input-group">
<input id="qp-cargo-value" name="qpCargo" placeholder="$" type="text"
class="form-group" currency="229" data-ng-model="cargoValue" required>
</div>
<div class="rederrorlabel"
ng-show="currencyValidation() && myform.qpCargo.$touched">
Error - Cargo value is required
</div>
</div>
Related
I have a number input in an HTML form that looks like this:
<div class="form-group col">
<label for="expLow1">Lower treshold (Exposure)</label>
<input type="number" step="0.01" id="expLow1" name="expLow1" class="form-control" placeholder="ex: 2" >
</div>
The problem is that if the user leaves the field empty, the form returns a default value of zero.
I tried setting the value parameter to "null" or to "", but the form always return zero when the field is left empty.
is there a way to have a null value in return of a number input and not zero if the user leave the field empty?
I have a form and I want to set some default values to be shown inside it. I have tried the following code:
<h3>ِStart Time</h3>
<div class="row" >
<div class="col">
<label for="startTime">Hour(s) </label>
<input type="number" [ngModel]="defaultSTime" class="form-control" name="StartTimeHour" value="card.startTime.getHours" id="startTime" min="0" max="23">
</div>
<div class="col">
<label for="startTime">Minute(s) </label>
<input type="number" [ngModel]= "defaultSMinute" class="form-control" name="StartTimeMin" value="card.startTime.getMinutes" id="startTime" min="0"max="59"> <!--input type can be changed accordingly-->
</div>
</div>
defaultSTime = 'card.startTime.getHours' ;
defaultSMinute = 'card.startTime.getMinutes';
this is supposed to work but it only shows me the empty box. where is the problem?
Not sure if this is the issue but from your definition of defaultSTime and defaultSMinute, they are strings while your inputs are defined as number type.
If you're trying to get a number from card object card.startTime.getHours, change your definition to:
defaultSTime = card.startTime.getHours;
defaultSMinute = card.startTime.getMinutes;
This will help you :
[
Also, to make it two way binding, keep banana-in-a-box for ngModel, i.e :
[(ngModel)]= "defaultSMinute"
There, is not much clarity in your comments - how you are constructing Card object, but i believe you missed following:
getHours() ; // these are functions of date not properties
Hello guys i'm trying something out in angular and i'm struck in between, we can assign values to input element for eg, where parameters is a list of parameters and is in ng repeat
<input type="text" ng-model="parameters.inParameterName" class="form-control number" value="{{parameters.inParameterName = current}}"/>
^This works but when i try to get right hand side of value from backend ie in that parameter variable
<input type="text" ng-model="parameters.inParameterName" class="form-control number" value="{{parameters.inParameterName = parameters.formula}}"/>
the text box ng model is assigning to that string and i'm not able to edit the field
You just need to assign a value from your database to model parameter in controller file.
function TodoCtrl($scope) {
// just assign then value of textDemo what ever you like ie you can set from database value or static depends upon you.
$scope.textDemo = 'Testing';
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="text" ng-model="textDemo" />
</div>
</div>
Working on an edit form, i'm able to display all data from my query except the one for addresses. Looked up my code and it looks good but still the old data from database isn't showing in that field. Could this be the way am calling it since its of text type?
Controller
public function edit($id)
{
$customer= Customer::findOrFail($id);
dd($customer->contact_address);
//return view('customers.edit', compact('customer'));
}
dd($customer->contact_address) returns
"18B Harvey Street, Crosstour Estate. Ikeja, Lagos."
edit form field
<div class="form-group">
<label for="contact_address" class="col-md-4 control-label">Contact Address</label>
<div class="col-md-6">
<textarea id="contact_address" type="text" class="form-control" name="contact_address" value="{{ $customer->contact_address }}" row="3" required autofocus></textarea>
</div>
</div>
How do make it display like the other field are?
value is not a textarea attribute, output the address between the textarea tags:
<textarea>{{ $customer->contact_address }}</textarea>
Alternatively, I believe textarea elements support the placeholder attribute, so:
<textarea placeholder="{{ $customer->contact_address }}"></textarea>
I want to perform this operation but value attribute is not working
<input name="grand_total" type="text" class="form-control" value="#{{sum(saletemp)*discount1/100 | currency: "৳"}}" />
<input name="discount" type="text" class="form-control" id="add_payment" ng-model="discount1"/>
Second question
If I want to send value from a P tag after html form submission, how can I do that and how can I retrieve that value?
I want to pass this value #{{sum(saletemp)*discount1/100 | currency: "৳"}} to my controller and want to store it into my database. Here is the code portion
<div class="form-group">
<label for="grand_total" class="col-sm-4 control-label">Discount</label>
<div class="col-sm-8">
<p class="form-control-static" ><b>#{{sum(saletemp)*discount1/100 | currency: "৳"}}</b></p>
</div>
</div>
You should use ng-model instead of dealing with the value attribute of input tag... That will provide you more flexibility for doing almost any kind of operation over it and accessing it in controller..
like ng-model="saletemp" will be available to you in controller as $scope.saletemp.. and if you want to call functions on some change in input tag value, you can simply call ng-change="functionName()" which you will have defined in controller as
$scope.functionName = function(){YOUR FUNCTION DEFINITION}
Here is the fiddle which will allow you to put the currency in input tag when ng-model is used. http://jsfiddle.net/arunpjohny/wNBAn/