I'm trying to check if an input has been touched and is empty (without the built in functions in angular).
<form-input is-invalid-on="isTouched && !gs.data.name || gs.data.name.length > 50"></form-input>
If isTouched && !gs.data.name evaluates to true && false then that side of the expression becomes false
So my question is quite simple, how do I make the entire expression evaluate to true if the input has been touched and if it's empty or has a length greather than 50?
I believe it is used as attribute directive.
is-invalid-on="(isTouched && gs.data.name.length) || gs.data.name.length > 50"
Reason? I assumed your gs.data.name is a string. Empty string when evaluated in javascript is still a truthy value. So you must evaluate it to length.
<form-input is-invalid-on="(isTouched && !gs.data.name) || (gs.data.name.length > 50)"</form-input>
can try using () and also check gs.data like isTouched && (!gs.data || !gs.data.name || !gs.data.name.length || gs.data.name.length > 50)
<form-input is-invalid-on="isTouched && (!gs.data || !gs.data.name || !gs.data.name.length || gs.data.name.length > 50)"></form-input>
Angular expression does not work exactly the same than javascript from what i got try this one :
<form-input is-invalid-on="isTouched && gs.data.name.length==0 || gs.data.name.length > 50"></form-input>
Assuming you properly initialized gs.data.name to empty string.
By the way you forgot the > on your tag.
I finally found the reason as to why it was behaving so strange, and as this question has many answers I could not delete it. So I might as well explain what happened.
It turned out that isTouched was always undefined because I was using it outside of the directive (even if it was used in an attribute of the directive) which made the expression undefined && false, resulting in isInvalidOn always being false.
Instead I made it so that I used isTouched later in the actual form-input template as ng-class={invalid: isInvalidOn && isTouched}, resulting in the desired behavior.
Related
I am trying to think of a cleaner way to write this condition:
[ngClass]="{
'class1':
image.isAvailable && (image.property !== true && !null),
'class2':
image.isAvailable && (image.property === true && !null)
}"
So image.property sometimes can be NULL, and I am trying to handle it...I know I'm missing something obvious but don't know what. Any help much appreciated
You could use safe navigation operator ?. with ternary operator.
[ngClass]="(image?.isAvailable && image?.property) ? 'class1' : 'class2'"
Safe navigation operator checks if a property is defined before trying to access it.
Update
OP's requirement - use neither of the classes if image?.isAvailable is undefined.
You could extend the ternary operator to one more level to check if image?.isAvailable is defined before applying the classes.
[ngClass]="image?.isAvailable ? (image?.property ? 'class1' : 'class2') : ''"
The empty string '' denotes empty class list if image?.isAvailable property is undefined.
This can be written like this:
[ngClass]="{
'class1':
image.isAvailable && !image.property),
'class2':
image.isAvailable && image.property)
}"
Also you can write like this:
[class.class1]="image.isAvailable && !image.property"
[class.class2]="image.isAvailable && image.property"
I am making a project using ReactJS and I am using a statement, but I do not know the name of it.
Here is a bit of my code so it might make sense.
function Login(props) {
return (
<form>
<input
type="text"
placeholder="username"
onChange={e=>props.app.setState({"username":e.currentTarget.value})}
value={props.app.state.username}
/>
<input
type="password"
placeholder="password"
onChange={e=>props.app.setState({"password":e.currentTarget.value})}
value={props.app.state.password}
/>
<button type="button" onClick={_=>props.app.loadTasks()}>Login</button>
{props.app.state.logged_in == -1 && <p className="error">Incorrect username or password</p>}
{props.app.state.logged_in >= -1 && <title>Task Keeper</title>}
</form>
);
}
The exact thing I need a name for is this line here:
{props.app.state.logged_in == -1 && <p className="error">Incorrect username or password</p>}
{props.app.state.logged_in >= -1 && <title>Task Keeper</title>}
Like I am using them and I don't even know what they are called. And if possible explain how is working? I am only assuming is working like an if statement.
What you are looking for is called Short-circuit evaluation and is analyzed really good on the MDN web docs.
First of all, an explanation of how this works, because it can be quite confusing when you're starting. When you do:
{props.app.state.logged_in >= -1 && <title>Task Keeper</title>}
You're telling React to render the result of the following operation:
props.app.state.logged_in >= -1
AND
<title>Task Keeper</title>
The ending result is that if props.app.state.logged_in >= -1 is true, then
<title>Task Keeper</title>
is rendered, and if not, then nothing is rendered. That is similar to telling React:
if (props.app.state.logged_in >= -1)
<title>Task Keeper</title>
Now as to what to call that concept in general, I'd say it's just conditional rendering. It works that way because of a quirk in javascript:
&& evaluates as the left hand side if the left hand side is false, otherwise it evaluates as the right hand side. Meaning that true && expression is equal to expression, and false && expression is equal to false. In general, The value of the && expression is the value of the subexpression last evaluated. This way of doing things is called short circuit evaluation.
I'm working form which will show specific div if the model value is equal to some specific string. This is how I'm checking but it's not working, what I'm doing wrong?
v-show="form.status === 'vh' || 'pr' || 'o'"
You can use an array instead with includes/indexOf > -1 (depending on your build setup / browser support) to avoid some repetition
v-show="['vh', 'pr', 'o'].includes(form.status)"
That attribute value isn't a valid javascript expression.
You could modify it to:
v-show="form.status === 'vh' || form.status === 'pr' || form.status === 'o'"
for a quick win, or if you don't like attribute clutter, write a computed/getter for this expression in your script.
This is a relatively simple question but I cannot figure out why this isn't working.
So I have ng-if statement in HTML where I check condition if its not true. as in:
<div class="new-asset" data-ng-if="$root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8'">
But for some reason this does not work. I also tried:
<div class="new-asset" data-ng-if="($root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8')">
Which has no affect whatsoever... I was reading up and trying to find a solution, someone suggested placing the condition in controller, which would also have performance increase (not 100% sure if it would), as in:
$scope.addNewAssetIf = $root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8';
and then referencing it in html as:
<div class="new-asset" data-ng-if="addNewAssetIf">
But I cannot use this approach due to asynchronous loading, and dependencies. I need to make this work somehow, I get no errors or anything, even though the question_type_id is 1 I still get .net-asset div shown. If I remove OR statement and only have 1 condition it works:
<div class="new-asset" data-ng-if="$root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8'">
Any help is appreciated.
Thanks
I'm ignoring everything angular related and trying to understand the basic logic behind the condition. If the ID == 1 won't it satisfy the second condition which asks it to be different from 8? And isn't that true for cases where the ID is 8?
In other words, don't you need && instead of ||?
This should really be a comment but I don't have enough reputation.
Try using a function:
$scope.addNewAssetIf = function() {
return $root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8';
};
Could you try using $rootScope instead of $root and include $rootScope as a dependency in your controller? The issue could just be that the variable is not in scope. You could also assign this to your $scope and then reference it directly in your template
Basically, the idea is to try and see if the values are bound to your template fine. You could even try and
{{$root.questionData.question_type_id}}</div>
To verify this, and then if not, start by addressing the root cause.
the AND && operator doesn't work, but when i replace it with an OR || operation it is workin, why? I just used OR || operator for testing, what i need is an && operator.
Please help. thanks
function validate() {
if ((document.form.option.value == 1) && (document.form.des.value == '')) {
alert("Please complete the form!");
return false
} else return true;
}
i also tried nested if but it doesn't work too
if(document.form.option.value==1)
{
if(document.form.des.value=='')
{
alert ("Please complete the form!");
return false
}
}
It sounds like || is what you are looking for here. The && operator is only true if both the left and right side of the && are true. In this case you appear to want to display the message if the value is 1 or empty. This is exactly what the || operator is for. It is true if either the left or right is true
If Or operator is working, means there are some javascript errors in your second part of condition. check document.form.des.value=='' (maybe just open your javascript console in Chrome/Firefox/IE8+)
its because one of the conditions specified above returns false and loop breaks. Is you use OR ,only one must be validated and returns true.. check your code for both the conditions.