如何验证具有必需属性的纸张无线电组元素 [英] How does one validate paper-radio-group element with required attribute
问题描述
此问题与此问题类似,但未得到回答&是1.0之前的版本.
我需要确保在提交表单
上至少选择了一个paper-radio-button
我可以为每个paper-radio-button
放置一个必填属性,但这意味着必须选择每个单选按钮.
This is similar question as this question but it was not answered & is pre 1.0.
I need to ensure that at least one paper-radio-button
is selected on form submit
I can place a required attribute to each paper-radio-button
but this means every radio-button have to be selected.
<iron-label> Type<br/>
<paper-radio-group name="types" allow-empty-selection attr-for-selected="value" selected="{{model.type}}" noink >
<paper-radio-button name="type" value="home" required> Home</paper-radio-button>
<paper-radio-button name="type" value="work" required> Work</paper-radio-button>
<paper-radio-button name="type" value="portal" required> Portal</paper-radio-button>
<paper-radio-button name="type" value="shipping" required> Shipping</paper-radio-button>
<paper-radio-button name="type" value="billing" required> Billing</paper-radio-button>
<paper-radio-button name="type" value="other" required> Other</paper-radio-button>
</paper-radio-group>
</iron-label>
推荐答案
与其给用户提供不选择任何单选按钮的选项,不如强制进行选择.您可以通过从中删除 allow-empty-selection
来完成此操作paper-radio-group
和paper-radio-button
中的required
属性.我还建议在fallback-selection
>,这样model.type
中的意外值将导致默认值,例如其他".
Instead of giving the user the option not selecting any radio button, it would be better to force a selection. You can do this by removing allow-empty-selection
from paper-radio-group
and the required
attribute from paper-radio-button
. I also recommend using fallback-selection
on paper-radio-group
so that an unexpected value in model.type
would result in a default value, such as "Other".
<head>
<base href="https://polygit.org/polymer+1.11.0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="iron-label/iron-label.html">
<link rel="import" href="paper-radio-group/paper-radio-group.html">
<link rel="import" href="paper-radio-button/paper-radio-button.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<x-form></x-form>
<dom-module id="x-form">
<template>
<iron-form id="form">
<form action="">
<iron-label> Type<br/>
<paper-radio-group name="types" attr-for-selected="value" fallback-selection="other" selected="{{model.type}}" noink>
<paper-radio-button name="type" value="home"> Home</paper-radio-button>
<paper-radio-button name="type" value="work"> Work</paper-radio-button>
<paper-radio-button name="type" value="portal"> Portal</paper-radio-button>
<paper-radio-button name="type" value="shipping"> Shipping</paper-radio-button>
<paper-radio-button name="type" value="billing"> Billing</paper-radio-button>
<paper-radio-button name="type" value="other"> Other</paper-radio-button>
</paper-radio-group>
</iron-label>
<div>
<paper-button on-click="submit">Submit</paper-button>
</div>
</form>
</iron-form>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-form',
properties : {
model: {
type: Object,
value: function() { return {type: 'fake'}; }
}
},
submit: function() {
console.log('type', this.model.type);
}
});
});
</script>
</dom-module>
</body>
这篇关于如何验证具有必需属性的纸张无线电组元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!