How to show required indicator if I call "addFormItem(Component,String)" to

Flow
1

In vaadin 14, there is one convinced way to add the component label in the form layout so that we can put the label and the component in one line.

But after I do this ,the required indicator will not show in the label. Does anybody know how to resolve this?

 binder.forField(tfName)
                .asRequired(I18NUtility.getValue("common.requiredfilednotempty", "Required filed cannot be empty"))
                .bind(FreeMarkerTemplate::getName, FreeMarkerTemplate::setName);

form.addFormItem(tfName, I18NUtility.getValue("Common.Name", "Name"));
2

Related issue: https://github.com/vaadin/vaadin-form-layout/issues/122

3

Yuri Li:
In vaadin 14, there is one convinced way to add the component label in the form layout so that we can put the label and the component in one line.

But after I do this ,the required indicator will not show in the label. Does anybody know how to resolve this?

 binder.forField(tfName)
                .asRequired(I18NUtility.getValue("common.requiredfilednotempty", "Required filed cannot be empty"))
                .bind(FreeMarkerTemplate::getName, FreeMarkerTemplate::setName);

form.addFormItem(tfName, I18NUtility.getValue("Common.Name", "Name"));

Maybe this workaround can give you an idea.
Instead of using the following method:
public FormLayout.FormItem addFormItem(Component field, String label)

Give a try, and use (use a prebuilt Label and call with that the addFormItem):
public FormLayout.FormItem addFormItem(Component field, Component label)

thus:

TextField tfName = new TextField();
tfName.setRequired(true);
// binding and other necessary settings if needed

Label tfNameLabel = new Label(I18NUtility.getValue("Common.Name", "Name"));
tfNameLabel.setClassName("required") // if tfName is required

form.addFormItem(tfName, tfNameLabel);

And I made a custom-form-item.css and annotated my form class with it:
@CssImport(value = "./styles/custom-form-item.css", themeFor = "vaadin-form-item")

the custom-form-item.css important content is the following (as I remember correctly, most of the attributes were copied from the original required label’s class):

:host ::slotted(label.required)::after {
    color: red;
    content: var(--lumo-required-field-indicator, "*");
    font-size: 15px;
    right: 0;
    padding-left: 0.2rem;
    text-align: end;
    transition: opacity 0.2s;
    width: 1em;
}

I hope it helps (or for someone who will have the same issue in the future) :slight_smile:

Károly