1

我有一个包含FormLayout.

我希望此布局包含 2 列：一列带有标题，第二列带有输入字段。我的字段都标记为必填项，因此所有标题都在右侧显示红色小指示器（输入字段上没有指示器）。

我的问题是我的输入之一是日期和时间。我必须在一行上显示这两个字段，并带有一个标题。

通过将这两个组件放入 Horizo​​ntalLayout 并在布局上设置标题，我可以轻松地将 2 个组件与标题并排设置。但这不是在标题上而是在每个输入字段上设置所需的指示符。

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");

form.addComponent(blocDateTime);

这是我得到的 (A) 与我想要的 (B) 的对比：

在此处输入图像描述

我可以通过在这些字段上设置自定义验证器、检查它们的值是否为空并在标题上设置样式来获得我想要的东西，但我想知道是否有更“标准”的方式来做到这一点。

4

3 回答 3

2

由于您只需要一个必需的指示符（红色星号），这表明您希望每行只有一个字段。

这意味着您应该创建一个将 PopupDateField 和 TextField 合二为一的 CustomField。

于 2018-07-02T09:31:06.140 回答
0

您可以创建一个 span 类型的组件对象并将您的日期字段和时间字段添加到 span 对象中，然后将 span 对象添加到表单布局对象中。您的代码将如下所示：

FormLayout bloc = new FormLayout();

Span dateTimeBox = new Span();
PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
dateTimeBox.addComponent(dateField);
dateTimeBox.addComponent(timeField);
blocDateTime.add(dateTimeBox);
blocDateTime.setCaption("caption.dateTime");
于 2018-07-03T07:03:12.553 回答
0

注意：如果您可以将 Vaadin 升级到 v7+，请使用 Tatu Lund 答案。

我通过为我的内部布局设置自定义样式以在我的标题上显示指示符并在表单内容单元格中隐藏所有必需的指示符来解决我的问题。

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");
blocDateTime.addStyleName("customrequired");

form.addComponent(blocDateTime);

CSS：

.v-formlayout-captioncell .v-caption-customrequired:after {
  content: "*";
  padding-left: 2px;
  color: red;
}
.v-formlayout-contentcell .v-required-field-indicator {
  display: none;
}
于 2018-07-26T13:07:42.240 回答