I am trying to do IBAN validation. Before this step, the user gets to input the country (5 countries in this case) and then when the user enters the IBAN, it should validate depended on the country selected. I am currently trying to use ng-iban with one country (BH), but can't seem to get it to work. Any help is appreciated and I am also open to using iban.js library if anyone can provide some helpful tips for that. My code for the country selection and IBAN field is included. Thanks!
<div class="form-group col-md-3 required">
<label class ="control-label">Country of Treatment</label>
<select class="form-control" ng-model="formDetails.Country" ng-options="lookup.ID as lookup.NAME for lookup in lookupCountry" required>
</select>
<div class="form-group col-md-3 required">
<label class ="control-label" >iBAN</label>
<input ng-model="formDetails.IbanNumber" ng-required= "formDetails.PaymentType == 'Wire' " ng-readonly="formDetails.PaymentType == 'Cheque'" class="form-control" placeholder="Enter iBAN Number" ng-iban="[BH]" >
</div>
Related
Here is my Code and so have many fields like this :
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"
/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
Company Name is required
</p>
Instead of defining separate message for all mandatory/invalid fields, can't I use single message with place holder for field name? So whenever I want to change message, I can manage this with single line change.
e.g. "${field} is required, ${field} is not valid etc."
please give me a example if this can do
The first solution that crossed my mind was just wrap the error messages in a function:
var displayError = (field) => `${filed} is required`;
And on the HTML
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
{{ displayError('Company name') }}
</p>
I am trying to make an input field a drop-down list as well. I have seen a few examples of what to do but yet when I mimic them I still have 2 separate fields for the data to go. I also have a problem with the datalist not displaying properly. Any ideas or routes to try would be greatly appreciated.
<div class="input-group">
<label class="input-group-addon tc-group-addon" data-translate="" title="{{$tcore.tcoreTranslations.TRANSLATIONS.elementList.ThinClient_TIS.translation_184}}">
TRANSLATIONS.elementList.ThinClient_TIS.translation_184
</label>
<input list="valueLists" ng-model="vm.selectedValue" class="form-control tc-tis-form-control" ng-change="vm.changeValue()" ng-disabled="vm.readOnly">
<datalist id="valueLists" ng-model="vm.selectedValue" class="form-control tc-tis-form-control" ng-change="vm.changeValue()" >
<option ng-repeat="item in vm.valueList" value="{{item}}">{{item}}</option>
</datalist>
What I am trying to mimic is this functionality where you can type inside the box or you can choose a predetermined value I want to mimic this
I am developing mobile application with the help of Angular and Ionic.
My address data is coming like this :
var data = [{"Address":"abcd","City":"Aromas","StateName":"CALIFORNIA","Country":"United States","ZipCode":"95004"}]
So i just push this data in
$scope.Add = data;
and showed in View
<div ng-repeat="demoData in Add">
<label class="item item-input"><input type="text" placeholder="Address" ng-model="demoData.Address" name="uStreetName" required="" autocomplete="off"/></label>
<label class="item item-input"><input type="text" placeholder="City" ng-model="demoData.City" name="uCity" required="" autocomplete="off"/></label>
<label class="item item-input item-select"><div class="input-label"> </div><select ng-model="demoData.StateID" ng-options="stateL.StateID as stateL.StateName for stateL in StateList"><option value="" disabled hidden>State</option></select></label>
<label class="item item-input item-select"><div class="input-label"> </div><select ng-model="demoData.CountryID" ng-options="countryL.CountryID as countryL.Country for countryL in CountryList"><option value="" disabled hidden>Country</option></select></label>
<label class="item item-input"><input type="text" placeholder="Zip" ng-model="demoData.ZipCode" name="uZip" required="" autocomplete="off"/></label>
</div>
<button class="button button-full button-assertive" ng-click="go(demoData)">Next</button>
I have drop down for country and state data like this :
CountryList :[{"CountryID":1,"Country":"United States"},{"CountryID":2,"Country":"Austria"},{"CountryID":3,"Country":"India"}]
StateList :[{"StateID":1,"StateName":"ALASKA"},{"StateID":2,"StateName":"ALABAMA"},{"StateID":3,"StateName":"ARKANSAS"},{"StateID":4,"StateName":"AMERICAN SAMOA"}]
My question is that, In address the state and country that are coming from API I have to show that in select input box and the user can edit the same. User are permitted to select the state and country if needed.
revised:
I am using the address API to get the address and i am auto populating the same. I want to auto populate in the select input but condition is that the user can reselect the state and country if needed.
If I understand correctly, you have the select inputs populated, but need the default value to be the one already saved against the user's address. The problem you have is that you're using CountryID and StateID as the values for the select options, but the country and state saved in the user's address are using Country and StateName.
You also need to modify the models used with the inputs, as you don't have StateID and CountryID in the data.
To fix this, change the select inputs to use the name as both the value and name, like so:
<select ng-model="demoData.StateName" ng-options="stateL.StateName as stateL.StateName for stateL in StateList">
<option value="" disabled hidden>State</option>
</select>
<select ng-model="demoData.Country" ng-options="countryL.Country as countryL.Country for countryL in CountryList">
<option value="" disabled hidden>Country</option>
</select>
I have some fields in an AngularJS form that need to record a total percentage. Form example;
Gender split of a group - % Males, % Females
Currently I am using a field for each gender.
<div class="form-group col-md-2">
<label for="male">% Male:<span class="error">*</span></label>
<input type="number"
name="males"
max="100"
class="form-control"
ng-model="newReport.males"
required>
</div>
<div class="form-group col-md-2">
<label for="female">% Female:<span class="error">*</span></label>
<input type="number"
class="form-control"
ng-model="newReport.females"
ng-readonly="true"
value="#{{ females() }}"
placeholder="#{{ females() }}"
required>
</div>
Then I use this function to calculate the Female %
$scope.females = function() {
return 100 - this.newReport.males;
};
However, my ng-model="newReport.females" never seems to get set. The placeholder does get the correct value from the function but won't persist since the model is not picking it up.
Is there a better way to do this? Also, once I am getting it to set the model properly, what is the best way to validate that the 2 fields add up to 100?
Thanks!
I have validation issue if i use k-ng-model on field that field is not required with Angularjs validation , User can submit the form so below code field is required even i dont select the value user can still submit the form.. Any idea how to solve it ?
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && ddChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
You can use ng-model with k-ng-model, Try assigning ng-model to a seperate variable and use ng-required.
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" ng-model="challengesDTO.themesKyListValue" ng-required
id="themesList"></select>
This solution worked for me: kendo ui, angular require validation for numeric text box
Just create a hidden input for the each kendo widget and bind the model from your k-ng-model also to the ng-model of the hidden field. The k-ng-model seems to be no NgModelController, which is why the validators cannot hook into the models $validators and do their work.
<input kendo-date-time-picker k-ng-model="$ctrl.event.endDate"></input>
<input type="hidden" name="endDate" ng-model="$ctrl.event.endDate" required></input>