Am trying to show the html element based on condition. Like i have to check claim.claimToDealerCurrencyExchangeRate is empty or null. If it is empty or null then, i dont want to display the element (label and span ).
But it is not working as expected. Label & span elements are visible even claim.claimToDealerCurrencyExchangeRate empty.
Please find my code below.
<div id="exchange" ng-if="hasClaimGrouping('customerInvoiceOrRepairDate')"
ng-show="claim.claimToDealerCurrencyExchangeRate == null"
class="form-group row">
<label class="col-lg-3">{{'claim.view.exchangeRateApplied'|translate}}
</label>
<span>{{claim.claimToDealerCurrencyExchangeRate}}</span>
</div>
Is there any reason why you are using both ng-if and ng-show? I think one of them should suffice. The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Your code has ng-show="claim.claimToDealerCurrencyExchangeRate == null" which means the div will be visible when claim.claimToDealerCurrencyExchangeRate is null. As per your ask, your logic is wrong. Use ng-hide="claim.claimToDealerCurrencyExchangeRate == null" or ng-show="claim.claimToDealerCurrencyExchangeRate != null". But since you are already using ng-if, you should combine all the conditions within it, unless you absolutely want the DOM element to be toggled between visibility and non-visibility multiple times and not have it re-instantiated every time, use a combination of ng-if and ng-show.
Also, understand empty and null are two different things in JavaScript. For example, if value is a variable. Then value = "" is empty but not null. value = "null" is not null but a non-empty string. Set value = null explicitly then it is null. And in all cases value is not undefined. Check what exactly claim.claimToDealerCurrencyExchangeRate is being set and define your logic in ng-show appropriately.
Related
I would like to simplify some code of mine. It's quite simple honestly. I have 1 input field, and if a certain condition is fulfilled, it should have 1 more attribute. It should have the list attribute. The Problem I'm having is, that I don't know how to dynamically set an attribute.
The code looks like this currently:
<input th:if="${fieldIndex == 0 && !#arrays.contains(dropDownFields, y)}"
th:disabled="${#arrays.contains(disabledFields, y)}"
th:field="*{ZMatrixValues[__${dataIndex}__].tableValues[__${i}__][__${y}__]}"
class="table-input" type="text" onfocus="focused(this)">
<input th:if="${fieldIndex == 0 && #arrays.contains(dropDownFields, y)}"
list="list"
th:disabled="${#arrays.contains(disabledFields, y)}"
th:field="*{ZMatrixValues[__${dataIndex}__].tableValues[__${i}__][__${y}__]}"
class="table-input" type="text" onfocus="focused(this)">
And as you can see, the 2 input fields are the exact same, except when this condition is true: #arrays.contains(dropDownFields, y), then it should also add the attribute list="list". Is there any easier way than copying so much code?
Any help would be appreciated, thank you!
Instead of using th:if you can use th:attr and place the conditional logic in that attribute using the Thymeleaf "if-then-else" operator: (if) ? (then) : (else).
Here is a simplified version of your code showing this:
<input th:attr="list=${#arrays.contains(dropDownFields, y) ? 'some_value' : null}">
If the #arrays.contains condition is true, then the list attribute will be added to the <input> element; otherwise if the condition is false, and the null is returned, then no attribute will be added.
Instead of 'some_value' you can use whatever you want - including the th:field expression from your question.
All the other attributes in your question can be included in the tag, and will be unaffected, since they are not part of the (if) ? (then) : (else) logic.
If I use an angular component like this in my template:
<my-cmp selectable />
And my component asks the following in its constructor:
constructor(#Attribute("selectable") selectable: string){};
Then selectable will be an empty string, as expected, but when it is used like this:
<my-cmp [attr.selectable]="true" />
This will place the attribute correctly to my tag in the DOM and result in the following:
<my-cmp selectable="true" />
But in this case selectable will always have a null value, regardless if it is on construct or on ngOnInit and of its given value (e.g. false, "" or anything else will also result in null).
The question here is: why?
And more important: how to use boolean attributes in angular the best way?
Note: I explicitly don't want to use property-binding in this case, the given "input" should be static.
You can have some insight for the internals concerning #Attribute decorator here :
Angular does not read attribute values during runtime, only during
compile time, as otherwise we would get a performance hit.
With the <my-cmp [attr.selectable]="true" /> syntax, your are creating a binding. But the attribute value will be set after the first change detection cycle. So at compile time you will not have the attribute set, so you get a null value.
Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
I got a form with some hidden fields that are only displayed if an option is selected.
I got this line to validate
Validation.RequireFields("atividade", "contaCliente", "contaServico", "nomeCliente", "dataAgendamento");
The first four fields are always visible, however the field dataAgendamento only appears if an option is selected like I said above.
That said when I try to to submit the form, I get an error that dataAgendamento is required. Is there some way to avoid validation on hidden fields?
Thanks in advance
Since you're having the Option visible only when the Condition is true. You can check or execute the validation only when the condition is true.
Do this,
Validation.RequireFields("atividade", "contaCliente",
"contaServico", "nomeCliente");
// Remove the last validator, and add it using a condition
if(valueFromSelect == "somecondition") {
Validation.RequireField("dataAgendamento", "Required visible field!");
}
This would make the field required only if the condition (value in the select clause is true) otherwise it won't add the Validation to the field.
I'm pretty sure it's not possible to do this but I'm still asking for it.
Is there a way for a user to insert a null (or an undefined) value into an html text input?
I need to distinguish between a null value and an empty string and I would like to allow the user to set this value into a single input.
For what I can see across the web, the standard solution to this problem is to match the text input with a checkbox that tell if the value is null or not. From my understanding, the limitation is linked to the fact that the textbox can hold an empty string but not a null value so that's why I think it's not possible to do exactly what I want.
You can't tell a text input to have any kind of null value. Empty checkboxes have a value of an empty string '' by definition. The best way to do it, as you say, is to have a checkbox that toggles the disabled property of the text input, which gives a similar semantic.
Necromancing.
The accepted answer is kindof wrong - there is a way, sort of.
If you set the textbox state to disabled (for example with the chrome developer tools), then it won't submit the input box's value.
Hence, if you deserialize the form model from a post-request, the text's value will be NULL, unless your deserializer deliberately changes data.