I'm trying to set an initial value to v-model where id has already been declared in data. However it shows error when compile.
<input clearable
v-model="id"
:value="id"
#keydown="isNumber"
autofocus/>
:value="id" conflicts with v-model on the same element because the latter already expands to a value binding internally
Any suggestion to solve the issue ?
TL;DR
v-model="id"
Does the same as
:value="id"
#input="id = $event.target.value"
Therefore you don't need to ADD :value=id, it's already "there"
From the documentation
<input v-model="searchText">
does the same thing as:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
so ... you're attempting to do the following
<input
clearable
v-bind:value="id"
v-on:input="id = $event.target.value"
:value="id"
#keydown="isNumber"
autofocus
>
Now since :value="id" is shorthand for v-bind:value="id", you can now see that you are trying to do
v-bind:value="id"
twice
Related
I have the following HTML Angular tags, which need to trigger a validation error when there is a negative value entered in any of the groups of textboxes (dynamic array).
<tr *ngFor="let order of configWT.get('wtFormArray').controls; let i =index" formArrayName ="wtFormArray">
<input natinput type ="number" [formControlName]="i" id="wtage" ngModelChange="updateWTage(i)" required>
ngOnInit
ngOnInit():void
{
this.configWT = this.formBuilder.group({
wtFormArray: new FormArray(['',[Validators.min(0)]])
}
Here is the error condition which is working for required validation, but not working for min validation.
Working
<nat-error *ngIf="configWT.get('wtFormArray').at(i).hasError('required'))"
error test
<nat-error>
Not Working
<nat-error *ngIf="configWT.get('wtFormArray').at(i).hasError('min')"
error test
<nat-error>
Here is the DOM
I am feeling like I am comparing min value with an array which may be causing this problem? please help!
I think, you should use minlength for minimum validation, it will be easier, because for new FormArray it's not correct to add validation in such way
<input natinput type ="number"
[formControlName]="i"
id="wtage"
ngModelChange="updateWTage(i)"
required
minlength="4">
<nat-error *ngIf="configWT.get('wtFormArray').at(i).hasError('minlength')">
error test
<nat-error>
CHECK
<div class="checkbox">
<input id="yes_1212" class="check_uncheck" type="checkbox" value="true" name="yes" checked="checked">
<label></label>
</div>
UNCHECK
<div class="checkbox ">
<input id="allow__100" class="check_uncheck" type="checkbox" value="false" name="Allow">
<label></label>
</div>
how to check whether the check box is checked or not
There are multiple ways depending on exactly what you're trying to do - if you've already found the element and just want to know whether or not it's checked you can do something like
element = find('#yes_1212')
...
element.checked?
If you're trying to assert that the box is on the page and is checked/unchecked you could do
expect(page).to have_field('yes_1212', checked: true) # checked: false or unchecked: true for not checked
or
expect(page).to have_checked_field('yes_1212') # or have_unchecked_field
If you want a boolean response and don't already have a reference to the element
page.has_field?('allow__100', unchecked: true)
page.has_unchecked_field?('allow_100')
In all cases if the input element is actually non-visible for styling reasons you can pass visible: false
'expect' syntax:
expect(page.find("input#yes_1212")).to be_checked
expect(page.find("input#yes_1212")).not_to be_checked
<input id="allow__100" class="check_uncheck" type="checkbox" value="false" name="Allow">
For input type checkbox
page.find(:css,
"input#allow__100", visible: false
).should_not be_checked
There are two ways of getting the checkbox's status.
In the code you can see find(locator_strategy, locator_xpath here locator_strategy is if you are searching the locator by :xpath or :css and the second parameter is locator_xpath which is locator written in the way the first parameter is defined.
So here first way is either you can assign the element you have found and then using element.checked? to get the status of checkbox, whether its checked or not checked. This would return either true or false
def method_name
element = find(locator strategy, locator_xpath)
return element.checked?
end
or, second way, which I feel is better way to proceed and consumes less line of codes.
def method_name
return find(locator strategy, locator_xpath).checked?
end
<paper-input
id="server"
floatinglabel=""
label="Server Address"
value=""
required
type="URL">
</paper-input>
the example above worked until the latest polymer update now even the required attribute does nothing. was there some change to core-input that i am missing in documentation? all my inputs with patterns, numbers, urls, or emails nothing causes it to get the invalid class.
<paper-input-decorator
id="address"
labelVisible
floatinglabel
error="URL Required"
label="Server Address">
<input is="core-input" type="URL" id="server" required>
</paper-input-decorator>
above is the updated markup for checking input of url. before the changes the input had invalid by default cause the field was required and updated as you type.
with the new changes you have to call a function to get the input to return the invalid class. (you could put a event listener on the input and run that function every time the input is updated. but i only check on attempted submission) to check i put all the inputs i want to check in a container (a div with a id) then when user click to submit i run the function below.
validate: function (id) {
'use strict';
var $d = document.getElementById(id).querySelectorAll('paper-input-decorator');
Array.prototype.forEach.call($d, function(d) {
d.isInvalid = !d.querySelector('input').validity.valid;
});
}
and pass in the id of the input container. validate(id);
that will cause the input to display the invalid class if input doesn't meet type / pattern requirement. you can then check for invalid class in the same method as before.
invalid = document.querySelector("#address").classList.contains("invalid");
outside a custom element or
invalid = this.$.address.classList.contains("invalid");
inside custom element
then some logic to check for invalid class before running the save function
if (!invalid) {
save();
}
also keep in mind that the decorator and input both have a id. the id on the decorator is used to check for validity while the id on the input is there for getting the value from the committedValue attribute.
info above is for the master branch pulled after 10 - 16 - 14
What's the suggested "best practice" way to use Knockout's "attr" data binding with standalone attributes like "readonly" and "disabled"?
These attributes are special in that they are generally enabled by setting the attribute value to the attribute name (although many browsers work fine if you simply include the attribute names without any values in the HTML):
<input type="text" readonly="readonly" disabled="disabled" value="foo" />
However, if you don't want these attributes to be applied, the general practice is to simply omit them altogether from the HTML (as opposed to doing something like readonly="false"):
<input type="text" value="foo" />
Knockout's "attr" data binding doesn't support this scenario. As soon as I provide an attribute name, I need to provide a value as well:
<input type="text" data-bind="attr: { 'disabled': getDisabledState() }" />
Is there a cross-browser way turn off 'disabled' or 'readonly'? Or is there a trick with a custom binding that I can use to not render anything if I don't want the item disabled or made read-only?
Knockout's "attr" data binding does support this scenario just return null or undefined from your getDisabledState() function then it won't emit the attribute.
Demo Fiddle.
You can also create a binding for readonly like this:
ko.bindingHandlers['readonly'] = {
'update': function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (!value && element.readOnly)
element.readOnly = false;
else if (value && !element.readOnly)
element.readOnly = true;
}
};
Source: https://github.com/knockout/knockout/issues/1100
Knockout has an enable binding as well as a disable binding.
I'm not sure if these were available when the question was asked, but anyone referring back to this issue should be aware.
When I use pattern in input like this:
<input type="text" value="" pattern="(\d|(\d,\d{0,2}))">
I receive popup warning with text. How can I easily change this text?
<input type="text" value="" pattern="(\d|(\d,\d{0,2}))" title="YOUR_WARNING_TEXT" >
<input type="text" value="" pattern="(\d|(\d,\d{0,2}))" oninvalid="this.setCustomValidity('ERROR_TEXT')" oninput="this.setCustomValidity('')"/>
Try this code, corrected to clear after input...
The text shown can be defined in the title attribute of the input tag.
The title is appended to the pattern warning. Just keep in mind the warnings are translated into the browser language, which can make an english string look odd.
This is the only way I found to completely replace the warning:
<input type="text" required pattern="PATTERN" oninvalid="invalid" oninput="invalid">
/**
* Shows a custom validity message
* #param e - event
*/
function invalid(e) {
if (!/PATTERN/.test(e.target.value)) { // somehow validity.valid returns a wrong value
e.target.setCustomValidity('INVALID')
} else {
e.target.setCustomValidity('')
}
}
Once the form is validated, the warning keeps popping up until the value matches the pattern. If the input event is just setting setCustomValidity('') as suggested in most other answers, the default warning returns.