Meteor AutoForm 中的条件(类别/子类别)选项
Conditional (category / subcategories) options in Meteor AutoForm
我目前正在使用 autoform 和 collection2 生成表单。我想创建一个 select 选项来更改子类别选项。
例如。 Select(类别)
- 水果
- 蔬菜
例如。 Select(子类别出现)
若果selected:
- 苹果
- 香蕉
如果蔬菜selected:
- 胡萝卜
- 西兰花
我一直在寻找解决方案,但找不到有效的解决方案。有人可以给我指出正确的方向吗,因为我不确定从哪里开始。
您可以使用 AutoForm.getFieldValue(fieldName, [formId])
. Then, you could set the subcategory options 检索 category
的当前值,具体取决于选择的是 fruit
还是 vegetables
。
例如:
var fruitArr = ['apple', 'banana'];
var vegetablesArr = ['carrot', 'broccoli'];
Food = new Mongo.Collection("food");
Food.attachSchema(new SimpleSchema({
category: {
type: String,
label: "Category",
allowedValues: ['fruit', 'vegetables']
},
subcategory: {
type: String,
label: "Subcategory",
allowedValues: _.union(fruitArr, vegetablesArr),
autoform: {
options: function () {
let category = AutoForm.getFieldValue("category");
if (!category) return [{label: "Please select a category first", value: ""}];
if (category === "fruit") return _.map(fruitArr, (v, i) => ({
label: "Fruit " + (i + 1) + ": " + v,
value: v
}));
else return _.map(vegetablesArr, (v, i) => ({label: "Vegetables " + (i + 1) + ": " + v, value: v}));
}
}
}
}));
我目前正在使用 autoform 和 collection2 生成表单。我想创建一个 select 选项来更改子类别选项。
例如。 Select(类别) - 水果 - 蔬菜
例如。 Select(子类别出现)
若果selected:
- 苹果
- 香蕉
如果蔬菜selected:
- 胡萝卜
- 西兰花
我一直在寻找解决方案,但找不到有效的解决方案。有人可以给我指出正确的方向吗,因为我不确定从哪里开始。
您可以使用 AutoForm.getFieldValue(fieldName, [formId])
. Then, you could set the subcategory options 检索 category
的当前值,具体取决于选择的是 fruit
还是 vegetables
。
例如:
var fruitArr = ['apple', 'banana'];
var vegetablesArr = ['carrot', 'broccoli'];
Food = new Mongo.Collection("food");
Food.attachSchema(new SimpleSchema({
category: {
type: String,
label: "Category",
allowedValues: ['fruit', 'vegetables']
},
subcategory: {
type: String,
label: "Subcategory",
allowedValues: _.union(fruitArr, vegetablesArr),
autoform: {
options: function () {
let category = AutoForm.getFieldValue("category");
if (!category) return [{label: "Please select a category first", value: ""}];
if (category === "fruit") return _.map(fruitArr, (v, i) => ({
label: "Fruit " + (i + 1) + ": " + v,
value: v
}));
else return _.map(vegetablesArr, (v, i) => ({label: "Vegetables " + (i + 1) + ": " + v, value: v}));
}
}
}
}));