node.js - 如何在 Node-Express-Mongoose 中设置动态选择控件的默认选项?
问题描述
我现在正在使用 PUG 作为视图引擎的 Node-Express 环境中工作。
我有 CompanySchema,其中一个字段“comp_ParentName”指的是架构本身:
comp_ParentName: {type: Schema.Types.ObjectId, ref: 'Company', required: false},
这不是必需的,因为并非每家公司都有母公司。因此,我想为用户提供一个选项,当他们想创建一家新公司时(在公司没有母公司或用户根本不知道公司有任何母公司)。
我的“创建新公司”表单中有一些测试代码,但不幸的是它不能 100% 达到我的目的:
div.form-group.row
label(class="col-sm-2 col-form-label col-form-label-sm")(for='comp_ParentName') Parent company:
div.col-sm-10
select#comp_ParentName.form-control(class="form-control form-control-sm" type='select', placeholder='Select parent company' name='comp_ParentName' required='false' )
- companies.sort(function(a, b) {let textA = a.comp_OfficialName_ENG.toUpperCase(); let textB = b.comp_OfficialName_ENG.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;});
for company in companies
if company
option(value=company._id selected=(company._id.toString()===company._id.toString() ? 'selected' : false) ) #{company.comp_OfficialName_ENG}
else
option(value=company._id) #{company.comp_OfficialName_ENG}
我在上面的代码中面临的问题是我总是在表单中有一个“预选”的公司,但正如我所说,我希望有一个选项可以将此字段留空。我尝试在以下帮助下添加一些默认选项,例如“选择母公司”
option(value="" disabled selected) Choose Parent Company
但是每次我尝试保存新公司时,都会弹出“请填写此字段”工具提示。
有没有可能的解决方法?
这是我在 companyController.js 中处理公司创建的代码:
exports.company_create_post = [
// Convert the companyrole to an array.
(req, res, next) => {
if(!(req.body.companyrole instanceof Array)){
if(typeof req.body.companyrole ==='undefined')
req.body.companyrole = [];
else
req.body.companyrole = new Array(req.body.companyrole);
}
next();
},
// Validate and sanitise fields.
body('comp_OfficialName_ENG', 'Must not be empty.').trim().isLength({ min: 1 }).escape(),
body('comp_ShortName_ENG', 'Must not be empty.').trim().isLength({ min: 1 }).escape(),
body('comp_GroupName_ENG', 'Must not be empty.').trim().isLength({ min: 1 }).escape(),
body('comp_Role.*').escape(),
body('comp_cntrID', 'comp_cntrID must be specified').trim().isLength({ min: 1 }).escape(), //reference to the associated country
body('comp_stID', 'comp_stID must be specified').trim().isLength({ min: 1 }).escape(), //reference to the associated state
body('comp_ctyID', 'comp_ctyID must be specified').trim().isLength({ min: 1 }).escape(), //reference to the associated city
// Process request after validation and sanitization.
(req, res, next) => {
// Extract the validation errors from a request.
const errors = validationResult(req);
// Create a Company object with escaped and trimmed data.
var company = new Company(
{ comp_OfficialName_ENG: req.body.comp_OfficialName_ENG,
comp_ShortName_ENG: req.body.comp_ShortName_ENG,
comp_GroupName_ENG: req.body.comp_GroupName_ENG,
comp_ParentName: req.body.comp_ParentName,
comp_Role: req.body.companyrole,
comp_cntrID: req.body.comp_cntrID,
comp_stID: req.body.comp_stID,
comp_ctyID: req.body.comp_ctyID
});
if (!errors.isEmpty()) {
// There are errors. Render form again with sanitized values/error messages.
// Get all Company roles for form.
async.parallel({
companyroles: function(callback) {
CompanyRole.find(callback);
},
}, function(err, results) {
if (err) { return next(err); }
// Mark our selected companyroles as checked.
for (let i = 0; i < results.companyroles.length; i++) {
if (company.companyrole.indexOf(results.companyroles[i]._id) > -1) {
results.companyroles[i].checked='true';
}
}
res.render('company_form', { title: 'Create Company', companyroles:results.companyroles, company: company, errors: errors.array() });
});
return;
}
else {
// Data from form is valid. Save company.
company.save(function (err) {
if (err) { return next(err); }
//successful - redirect to new company record.
res.redirect(company.url);
});
}
}];
更新:在@Ankur R 的帮助下,问题基本得到解决,但现在我面临另一个问题。当公司有一个母公司时绝对没问题,我可以在我的选择控件的下拉列表中选择母公司的名称。但是,在公司没有母公司的情况下,我的 company_detail.pug 中的点符号停止工作并给我一个错误。
company.comp_ParentName.comp_OfficialName_ENG
它说“无法读取未定义的属性'comp_OfficialName_ENG'”。考虑到它被分配了一个零值,这是非常合乎逻辑的:
option(value="" selected) No Parent Company
这是我在“company_form.pug”中的选择控件(只是为了显示“comp_ParentName”是如何创建的):
div.form-group.row
label(class="col-sm-2 col-form-label col-form-label-sm")(for='comp_ParentName') Parent company:
div.col-sm-10
select#comp_ParentName.form-control(class="form-control form-control-sm" type='select', name='comp_ParentName' )
- companies.sort(function(a, b) {let textA = a.comp_OfficialName_ENG.toUpperCase(); let textB = b.comp_OfficialName_ENG.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;});
option(value="" selected) No Parent Company
for company in companies
if company
option(value=company._id selected=(company._id.toString()===company._id.toString() ? 'selected' : false) ) #{company.comp_OfficialName_ENG}
else
option(value=company._id) #{company.comp_OfficialName_ENG}
这是“company_detail.pug”中的代码,其中点符号停止工作,表示“comp_ParentName”未定义。
div.form-group.row
label(class="col-sm-2 col-form-label col-form-label-sm")(for='comp_ParentName') Parent company:
div.col-sm-3
input#comp_ParentName.form-control(class="form-control rdonly form-control-xs" type='text', name='comp_ParentName' value=(undefined===company ? '' : company.comp_ParentName.comp_OfficialName_ENG ) readonly)
关于如何处理这个问题的任何想法?
解决方案
您的创建选择和选项的代码存在问题。
我尝试使用下面的代码并且它有效。
form
div.form-group.row
label(class="col-sm-2 col-form-label col-form-label-sm")(for='comp_ParentName') Parent company:
div.col-sm-10
select#comp_ParentName.form-control(class="form-control form-control-sm", name="comp_ParentName")
option(value="" selected) Choose Parent Company
option(value="1") One
option(value="2") Two
div.form-group.row
button(type="submit") Submit
更新:
- 在此处选择不需要指定 select="true/false" 因为浏览器只检查必需的属性。
- 不建议在选择中禁用清空值选项,因为一旦用户选择了其他选项并想要取消选择,就不可能了。
推荐阅读
- php - 使用 php 中的每个循环上传 zip 档案会导致 codeigniter 中 zip 文件中的 zip 档案重复
- python - Pygame箭头键不起作用
- scala - Scala Maven 编译器:NullPointerException
- nlp - 如何编写脚本以在斯坦福依赖解析器中保留标点符号
- java - 无法使用 Java 中的动画功能更改动画图像
- visual-studio-2017 - 如何在 VS 2017 中创建由多个快捷方式组成的自定义快捷方式?
- javascript - Ajax 请求未完成
- swift - 当我在 TableView 中向下滚动时,单元格数据会发生变化 - Swift 4
- bash - npm 脚本可以使用 Github API 将包发布到 Github 吗?
- javascript - 标签内容显示然后消失 AJAX Codeigniter