I have an optionset field in an entity, I want to fire a JavaScript method on this field change. I want to capture the old value of the field on the change. I've got a solution which gets the old value on form load, but this doesn't work on multiple changes.
This has to be solved by our own code implementation. Store the attribute value on form load in a variable, keep the new value in that variable on every change, so you can use that in onChange handler. At the end of business validation inside handler put that new value in variable if success or revert to old value if failed.
var previousValue;
function onFormLoad(){
previousValue = formContext.getAttribute("fieldname").getValue();
}
function onFieldChange(){
if(myBusinessValidationSucceeds){
previousValue = formContext.getAttribute("fieldname").getValue();
}
}
Idea 1 and Idea 2
Related
I want to get one-time information from the input control when value is empty and when value is not empty
Right now I'm using onChange like below:
<Input onChange={onChangeValue()} />
But this onChangeValue method is running every time when I type into the input, but I want two times information, first when value from input is empty and second when value from input is not empty.
Can someoone tell me what can I do this?
You can put some logic before your onChangeValue() function that checks the input value's length and then calls onChangeValue():
beforeOnChangeValue = function() {
if(arguments[0].target.value.length <= 1) return onChangeValue(arguments)
}
<Input onChange={beforeOnChangeValue} />
This way the onChangeValue() function will only be called when the input is either emptied or when the first character is put in
it seems like you're using controlled components (changing the value of the control on every key typing). I think based on your strategy that you could use a flag in the onChange handler like this
function onChange (evt) {
setIsEmpty(!!evt.target.value);
// Your code ...
}
Then you'll always know if the input is empty or not.
function Form () {
const [isEmpty, setIsEmpty] = React.useState(false);
// onChange here
return <Input className={isEmpty ? 'empty-class' : 'non-empty-class'} />
}
I appreciate all of your idea in advance. My problem here is the input field of the email is not updating. Can anyone give me a solution?
<input
type="text"
placeholder="Enter Email "
onChange={this.emailHandle}
value={this.state.email}
/>
Event handler for the above input field is here:
emailHandle = (e) => {
if (e.target.value !== "undefined") {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if (pattern.test(e.target.value)) {
console.log(e.target.value);
this.setState({ email: e.target.value })
}
}
}
The onChange event will never be validate by the regex cause it is called on each key typed. So you start typing andy#gmail.com, with the a but a does not pass the regex... so the state is not updated... so it's like you didn't type a.
What's the initial value of your component state? For one, if you're not initializing the email property on state to be an empty string, and it's undefined, you're blocking that state from ever updating with your undefined check. But you have a bigger problem than that. You're testing to see if the value of the input matches your email regex pattern. That won't ever work if you use that check to block setting state. onChange is going to fire every time the input value changes, and that means it's going to change one character at a time. So what's happening is the user types a character, the onChange fires, but it doesn't match your pattern, and you don't update state.
What you want to do is always update state and then handle this as validation to block submitting the form. Or you could show an error of some kind, but you need to always call setState with the new value on e.target.value.
I am trying to learn basics of Angular and stuck with a particular doubt. I have a set of dynamically generated radio button and one of them will be selected by default.
I want to check and detect the change of selection of radio button. This might not be particularly related to angular or maybe logic based question. Below is what I have attempted.
$scope.selectedReason= function(radio1)
{
$scope.radio7=radio1.id; // now radio7 has the value of radio7 e.g "12345"
$scope.bankAccount=radio1;
}
// another function where I am checking if the selected value is not same as new value
$scope.selectedAmount= function(radioSelect)
{
console.log($scope.radio7); // old value 12345
$scope.preselectedAccount = $scope.radio7; // hoping to store old value
$scope.selectedValue = $scope.preselectedAccount;
if ($scope.selectedValue == $scope.radio7){
console.log("Success");
}
}
Baiscally I am trying to store old value to a variable and check but its obvious that every time a new value comes the variable takes that value so there is not point in doing this. Any way I could pertain my old value check with new values.
Edit:
Input
<input type="radio" id="child_{{$index}}" name="radio2" ng-model="selectedBankAccount" ng-value="bankAccount" ng-click="selectedReason(bankAccount)">
You can use the change event for it
// you can pass anything in the function
<input type="radio" (change)="handleChange(child_{{$index}})" />
and in your TS file implement the handleChange function and do what you want.
handleChange(id) {
console.log(id);
}
I am trying to set validation on an input field using AngularJS directive, so that when the user types invalid value, the underlying model value changes to the last valid one. This is the contents of the directive:
// returns true/false
function validateValue(value) {
}
ngModelCtrl.$parsers.push(validateValue);
ngModelCtrl.$formatters.push(validateValue);
scope.$watch(attrs.checkValidName, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});
So from my understanding, this code will basically run validateValue callback on every change of the input value and mark the input field with valid/invalid depending of the return value. This works great for basic validation, but the side effect of this in case the value is invalid, model value won't contain anything. I'm not sure how to change the code, so that when the value is invalid, the modal value actually contains the last valid value ?
Maybe you can overwrite $$writeModelToScope in the NgModelController. Only update the scope value if the controller is valid.
ngModelCtrl.$$$writeModelToScope = ngModelCtrl.$$writeModelToScope;
ngModelCtrl.$$writeModelToScope = function() {
if (ngModelCtrl.$valid) {
ngModelCtrl.$$$writeModelToScope();
}
};
I'm creating an html5 JS form library. The idea is to turn elements with a class of .form-item into content editable divs, using the elements' data-attributes as instructions for the type of form item, validation, etc that should be created.
The code below creates a validation object for a single form item that checks to see if the minimum length of the field value is met. The object's properties include the DOM element it applies to (el), the minimum length for the field (minLen), the error message (msgError) that should be displayed if that minimum length is not met, and a function (submit) that returns whether the object validates, displaying the error message if it does not.
However, the submit property function always returns false. I'm pretty sure I know why, but I'm not sure of the best way to correct it. I believe the problem I'm running into has to do with the notion of a closure. The submit property checks the length of the innerHTML of the form item element and compares it to the minLen property. But I think this only happens at the moment of instantiation of the validation object, when the innerHTML.length is always 0 (because the form item, and the validation object, must be created prior to the user being able to enter anything into the field). How should I modify the below code so that the submit property function runs anew any time it is called (thereby checking the current length of the innerHTML of the field, rather than the length at the moment of instantiation)?
function formValidateMinLen(item){
var minLen = item.attr('data-minLen');
this.el = item;
this.minLen = minLen;
this.msgError = item.attr('data-error_minLen');
this.submit = function(){
if(this.el.html() >= this.minLen){
return true;
}else{
this.el.after('<div class="msgError">' + this.msgError + '</div>');
return false;
}
}
}
item = new formValidateMinLen($('#registration-form .form-item:first'));
I did come up with one solution, which is to pass the innerHTML of the form item element as an argument to the submit property function, like this:
this.submit = function(html){
if(html >= this.minLen){
...
}
item = new formValidateMinLen($('#registration-form .form-item:first'));
item.submit($('#registration-form .form-item:first').html());
However, I don't like that solution because it seems redundant to have to re-specify the DOM element in the item.submit code (since the object already contains that DOM element in its el property).
So... what should I do?
I'm an idiot. I was comparing the innerHTML to the minimum length, rather than the LENGTH of the innerHTML to the minimum length. Now it works :)