Material Design+Flask wtf表单值为None，因为mwc文本字段具有名称

Question

我使用bootstrap5+材料设计(此模板：https://startbootstrap.com/previews/material-admin-pro)我在使用烧瓶wtf从表格中获取数据时遇到了一些麻烦。

首先，除非我使用以下格式，否则我似乎无法重新创建功能：

<mwc-textfield class="w-100" label="Password" outlined name="password" id="password" type="password"></mwc-textfield>

当页面运行时，mwc textfield创建一个影子根，然后该影子根具有"输入类型="；密码"；name＝"；密码"``里面。

当我提交表格时，烧瓶wtf必须抓取第一个name="密码">，其为"；无"；因为它来自构造函数，而不是输入。

我错过了什么？我需要重新创建材料形式而不使用吗？或者有更好的方法来处理这个问题吗？

Answer 1

我是Material Admin Pro主题的创建者之一。这是我们的一些用户过去多次提出的问题，我们在GitHub上的反馈回购中对此进行了回答。

我们正在使用表单特定的Material Web Components插件来设计本主题中的一些组件，这些插件是为处理表单而设计的，并且具有所有基本的输入功能。当将它们用作没有JS库的纯HTML时，输入被shadow DOM隐藏。我们在这里发布了一个解决方案：

https://github.com/StartBootstrap/pro-feedback/issues/25#issuecomment-808302598

以下是一个使用一些JavaScript来实现此功能的示例，基于material admin-pro:src/pug/pages/app-auth-login-basic.pug 中的登录表单示例

form
.mb-4
mwc-textfield#userName.w-100(label='Username', outlined)
.mb-4
mwc-textfield#password.w-100(label='Password', outlined, icontrailing='visibility_off', type='password')
.d-flex.align-items-center
mwc-formfield#rememberPassword(label='Remember password')
mwc-checkbox
.form-group.d-flex.align-items-center.justify-content-between.mt-4.mb-0
a.small.fw-500.text-decoration-none(href='app-auth-password-basic.html') Forgot Password?
a.btn.btn-primary(onclick='submitForm()') Login
script.
function submitForm() {
const userName = document.getElementById('userName').value;
const password = document.getElementById('password').value;
const rememberPassword = document.getElementById('rememberPassword').value;
console.log({
userName,
password,
rememberPassword
});
// Do some validation
// Process, or submit for a new page...
}

希望这有助于缓解您在使用该产品时遇到的一些问题。

我想知道您发现SimpleDataTables插件有什么限制？我们选择它作为DataTables的一个非jQuery依赖的替代方案，DataTables具有更多的功能。如果您有其他选择供我们查看，我们很乐意将其融入主题中！