diff --git a/README.md b/README.md index e9b3af9c5b..665d75961f 100644 --- a/README.md +++ b/README.md @@ -557,6 +557,8 @@ const uiSchema = { }; ``` +In addition it is valid to maked an array as "required". This means the user must select at least one items to add to the array. + See the "Arrays" section of the playground for cool demos. ### Autogenerated widget ids diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js index 6239274bec..45490c5500 100644 --- a/src/components/fields/ArrayField.js +++ b/src/components/fields/ArrayField.js @@ -109,8 +109,12 @@ class ArrayField extends Component { onDropIndexClick = (index) => { return (event) => { event.preventDefault(); + var newitems = this.state.items.filter((_, i) => i !== index); + if (newitems.length == 0) { + newitems = undefined; + } this.asyncSetState({ - items: this.state.items.filter((_, i) => i !== index) + items: newitems }, {validate: true}); // refs #195 }; }; @@ -175,12 +179,12 @@ class ArrayField extends Component { autofocus, } = this.props; const title = (schema.title === undefined) ? name : schema.title; - const {items} = this.state; const {definitions, fields} = this.props.registry; const {TitleField, DescriptionField} = fields; const itemsSchema = retrieveSchema(schema.items, definitions); const {addable=true} = getUiOptions(uiSchema); - + var {items} = this.state; + items = items || []; return (
@@ -220,7 +224,7 @@ class ArrayField extends Component { } renderMultiSelect() { - const {schema, idSchema, uiSchema, disabled, readonly, autofocus} = this.props; + const {schema, idSchema, uiSchema, disabled, required, readonly, autofocus} = this.props; const {items} = this.state; const {widgets, definitions} = this.props.registry; const itemsSchema = retrieveSchema(schema.items, definitions); @@ -231,6 +235,7 @@ class ArrayField extends Component { v !== value); + var ret = selected.filter(v => v !== value); + if (ret.length == 0) { + return undefined; + } else { + return ret; + } } function CheckboxesWidget(props) { @@ -19,7 +24,7 @@ function CheckboxesWidget(props) { return (
{ enumOptions.map((option, index) => { - const checked = value.indexOf(option.value) !== -1; + const checked = (value === undefined) ? false : value.indexOf(option.value) !== -1; const disabledCls = disabled ? "disabled" : ""; const checkbox = (