Implement bind:checked & bind:indeterminate on input[type=radio]

https://github.com/sveltejs/svelte/issues/1104
https://github.com/sveltejs/svelte/issues/1263
pull/1264/head
Brian Takita 8 years ago
parent bc416a538f
commit 63421744b8

@ -111,9 +111,10 @@ export default function validateElement(
);
}
if (checkTypeAttribute(validator, node) !== 'checkbox') {
const checkTypeAttribute__ = checkTypeAttribute(validator, node);
if (checkTypeAttribute__ !== 'checkbox' && checkTypeAttribute__ !== 'radio') {
validator.error(
`'${name}' binding can only be used with <input type="checkbox">`,
`'${name}' binding can only be used with <input type="checkbox"> or <input type="radio">`,
attribute
);
}

@ -0,0 +1,42 @@
export default {
'skip-ssr': true,
data: {
indeterminate: true,
},
html: `
<input type="radio">
<p>checked? false</p>
<p>indeterminate? true</p>
`,
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.checked, false);
assert.equal(input.indeterminate, true);
const event = new window.Event('change');
input.checked = true;
input.indeterminate = false;
input.dispatchEvent(event);
assert.equal(component.get('indeterminate'), false);
assert.equal(component.get('checked'), true);
assert.htmlEqual(target.innerHTML, `
<input type="radio">
<p>checked? true</p>
<p>indeterminate? false</p>
`);
component.set({ indeterminate: true });
assert.equal(input.indeterminate, true);
assert.equal(input.checked, true);
assert.htmlEqual(target.innerHTML, `
<input type="radio">
<p>checked? true</p>
<p>indeterminate? true</p>
`);
},
};

@ -0,0 +1,3 @@
<input type='radio' bind:checked bind:indeterminate>
<p>checked? {{checked}}</p>
<p>indeterminate? {{indeterminate}}</p>

@ -1,5 +1,5 @@
[{
"message": "'checked' binding can only be used with <input type=\"checkbox\">",
"message": "'checked' binding can only be used with <input type=\"checkbox\"> or <input type=\"radio\">",
"loc": {
"line": 1,
"column": 7
@ -9,4 +9,4 @@
"column": 25
},
"pos": 7
}]
}]

Loading…
Cancel
Save