I need to disable input field until its dependent fields have valid value.
I want to have a generic function for this.
But for this, I need to know which input field's ng-disabled method is called.
I'll have a map, using which I will check if the modelValue of its dependent fields are defined and set ng-disabled based on this.
HTML:
<input type="text" class="form-control"
ng-init="oeMinLength = '3'"
ng-model="vm.trade.BOAT_CUSTOMER_NAME"
ng-disabled="vm.dependencyValidation()"
id="fi-oe" name="oe">
<input type="text" class="form-control"
ng-model="vm.trade.BOAT_CONTACT"
ng-disabled="vm.dependencyValidation()"
id="fi-contact" name="contact">
Controller:
vm.dependencyValidation = function () {
var identifier = 'contact';
if (isEmpty(getDependent(identifier))) {
return false;
}
else {
true;
}
};
I do not want to pass the name/id as the parameter to vm.dependencyValidation().
Related
I have inputs with labels that rise when input has data, like materialize ( https://materializecss.com/text-inputs.html ).
I use my checkInputData function to check if input has any value and set 'with-data' class. It works when user input some data to input but when i initialize the component and data returned from api it does`n works.
How can i set 'with-data' class to my input when data returned from api?
My HTML
<input type="text" :value="name" #input="setName($event.target.value); checkInputData($event);" />
<label class="input-label">name</label>
checkInputData function
checkInputData(event) {
let input = event.target;
let hasValueClass = 'with-data';
if(input.value != '') {
input.classList.add(hasValueClass);
} else {
input.classList.remove(hasValueClass);
}
},
Use v-model for 2 way bind and use it for altering class(it will ignore the :value property).
<input type="text" v-model="nameValue" :class="{'with-data' : nameValue !== ''}" #input="setName($event.target.value);" />
<label class="input-label">name</label>
within data add nameValueproperty as well.
data(){
return {
/*other values*/
nameValue:''
}
}
I have textbox and value is assigned by model
<input class="form-control" type='text' ng-focus='getFocusEl($event)' ng-change='profileNameValidate(profileData.profileName)' ng-model='profileData.profileName' maxlength="64">
If that textbox value coming from api as
1223424534568878687676786786786876786786786786876767867868768768
While showing in text box 1.2234245345688787e+63
I need to show full length integer in textbox.
How to do that?
The best way would be to stringify the value before setting it to the textbox.Further you can leverage the getter setter function if you are using angular >=1.3.
<input class="form-control" type='text' ng-focus='getFocusEl($event)' ng-change='profileNameValidate(profileData.profileName)' ng-model='profileData.profileName.getString' maxlength="64"
ng-model-options=" {getterSetter: true }">
And then in your controller
$scope.profileData.profileName.getString: function (value) {
if (angular.isDefined(value)) {
$scope.profileData.profileName = value;
} else {
return $scope.profileData.profileName.toString();
);
}
}
For more info see section Binding getter/setter ng-model
I am trying to get suggestions from input box, but if model has multiple values in wheelName like "wheel1", "wheel1", "wheel2", and with this, when I enter "wheel1" in inputbox, i get 2 suggestions as wheel1, wheel1, but i want unique suggestion i.e. wheel1 to be shown only once.
Input declaration looks like below:-
<Input
id="wheelInput"
type="Text"
placeholder="Enter Wheel..."
showSuggestion="true"
maxLength="40"
startSuggestion="3"
suggestionItems="{wheel>/results}" >
<suggestionItems>
<core:Item text="{wheel>wheelName}"/>
</suggestionItems>
</Input>
Assuming your results list differs with every character you type into your input, you can attach a function to the liveChange of the Input field.
You can then put your custom logic (e.g. no double names) into a separate model property. I haven't tested the code but Ii should work (provided I didn't make a typo).
View:
<Input
id="wheelInput"
type="Text"
placeholder="Enter Wheel..."
showSuggestion="true"
maxLength="40"
liveChange="filterWheelList"
startSuggestion="3"
suggestionItems="{wheel>/filteredWheelList}" >
<suggestionItems>
<core:Item text="{wheel>wheelName}"/>
</suggestionItems>
</Input>
Controller:
filterWheelList: function(){
var wheelModel = sap.ui.getCore().getModel("wheelModel");
var wheelList = wheelModel.getProperty("/results");
var uniqueNames = [];
var filteredWheelList = wheelList.filter(function(wheel){
if (uniqueNames.indexOf(wheel.wheelName) === -1){
uniqueNames.push(wheel.wheelName);
return true;
} else {
return false;
}
});
wheelModel.setProperty("/filteredWheelList", filteredWheelList);
}
It is possible make the required value dependet of some funcion?
Something like this? I want to do this because I want to change the required attribute to some form inputs...
HTML:
Name: <input type="text" ng-model="user.name" ng-required="isRequired('name')" />
Age: <input type="text" ng-model="user.age" ng-required="isRequired('age')" />
JS:
$scope.isRequired(fieldName){
$scope.requiredFields = [];
//$scope.requiredFields = STUFF FROM SOME REST SERVICE
for (i in requiredFields) {
if (requiredFields[i] == fieldName){
return true;
}
}
return false;
}
Updated Answer:
So based on your updated OP, what you want is certainly doable. The problem with what you were trying to do is that ng-required has no ability to execute a function, it only reads a boolean. But we can dynamically create variables based on data from the server to automatically set fields to required:
Updated Plunker
<form>
Name: <input type="text" ng-model="user.test" ng-required="name" /><br/>
<input type="text" ng-model="user.name" ng-required="age" />
<br/>
<button type="submit">Submit</button>
</form>
Note that I put a $scope property for each input in the ng-required attribute. Now we can dynamically create that $scope property and set it to true if our data says we need to:
$scope.isRequired = function(){
$scope.requiredFields = [];
$http.get('fields.json')
.success(function(data){
$scope.requiredFields = angular.fromJson(data);
console.log($scope.requiredFields.required)
for (i = 0; i < $scope.requiredFields.required.length; i++) {
$scope[$scope.requiredFields.required[i]] = true
}
console.log($scope[$scope.requiredFields.required[0]]);
})
//$scope.requiredFields = STUFF FROM SOME REST SERVICE
}
$scope.isRequired()
So it is iterating over an array of required fields received from the server, and then dynamically creating a $scope property for each one that is required, and setting it to true. Any field that has that $scope property in it's ng-required will be required now. Anything not dynamically created will just return false, and ng-required doesn't trigger.
Original answer:
Plunker
As Pratik mentioned, ng-required only accepts a Boolean value, but we can toggle the value of that with a function.
HTML
<form>
Name: <input type="text" ng-model="user.name" ng-required="isRequired" />
<br/><button ng-click="toggle()">Required: {{isRequired}}</button>
<button type="submit">Submit</button>
</form>
code:
$scope.isRequired = true;
$scope.toggle = function() {
$scope.isRequired = !$scope.isRequired;
}
I know this is a couple of years old and so AngularJS may have changed, but the accepted answer as it stands today isn't correct. You can very easily execute a function within ng-required, as it takes an expression, which can be a function. For example:
index.html
<div ng-controller="ExampleController" class="expressions">
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs track by $index">
[ X ]
<code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
</li>
</ul>
</div>
script.js
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
In script.js, a function addExp is defined and added to the scope, and then it's called in the ng-click directive of the a tag, which also takes an expression as its argument.
This code is taken directly from the AngularJS documentation on expressions. It doesn't use ng-require directly, but any directive that takes an expression will work the same. I have used the same syntax to use a function for ng-require.
I made a directive to translate in different languages using an input text. if I'm on english state and the input is empty but my model have a valid value in french. The validation only works on the value in the input text. I would like to make the attribute "required" to works if there is valid value in the part of my model that is not shown in the input. (there is no button in template, only the input and a dropdown to switch language)
ex:
<input class="form-control" type="text" ng-model="inputValue" ng-required="true">
<button ng-click="inputValue = translation.fr">Switch</button>
<script>
var default = "en";
function ctrl($scope) {
var default = "en";
$scope.translation = { fr: "Francais", en: "" }
$scope.inputValue = $scope.translation[default];
}
</script>
Use the librairy lodash
Your template:
<input class="form-control" type="text" ng-model="inputValue" ng-required="isRequired">
Javascript:
scope.isRequired = function() {
return !_.some(scope.inputValue, function(a) { return a !== ""; });
};