仅当第一个组件通过验证时，有条件地更新第二个组件

Question

我有两个PrimeFaces SelectOne菜单组件。当第一个组件设置为某个值时，我需要第二个组件成为必需的。我使用Ajax和绑定在提交第一个组件时更新第二个组件，以便用户在第二个组件的标签旁边看到所需的“*”。那部分很简单。

以下是（稍微简化的）代码：

<p:outputLabel id="foolbl" for="foo"
    value="Foo" />
<p:selectOneMenu id="foo" required="true"
    value="#{bean.foo}" binding="#{foobnd}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems
    value="#{bean.foovalues}" />
<p:ajax
    update="@this foolbl bar barlbl"
    process="@this"/> 
</p:selectOneMenu>

<p:outputLabel id="barlbl" for="bar"
    value="Bar" />
<p:selectOneMenu id="bar"
    required="#{foobnd.valid and foobnd.value eq 'value1'}"
    value="#{bean.bar}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems
    value="#{bean.barValues}" />
<p:ajax update="@this barlbl" process="@this" />
</p:selectOneMenu>

它工作正常，但以下情况除外：

1. 用户从foo中选择值1。结果：Bean用foo更新

显然，这是工作，因为它应该每个JSF。然而，我担心这会导致用户没有注意到问题，并意外地提交了bean.bar的值，而他并不打算这样做。这是一种边缘情况，但是用户可以在foo中选择“选择一个”，然后选择除“值1”以外的一些值，从而导致问题。

为了避免这种情况，我可以在foo的ajax调用的process属性中添加bar，如下所示：

<p:selectOneMenu id="foo" required="true"
    value="#{bean.foo}" binding="#{foobnd}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems
    value="#{bean.foovalues}" />
<p:ajax
    update="@this foolbl bar barlbl"
    process="@this bar"/> 
</p:selectOneMenu>

这避免了前面描述的问题，但它也有一个意想不到的结果，即在初始选择foo时提交bar的值，因此在验证失败时将bar突出显示为红色。我不希望这种情况发生。当foo被提交时，我只希望“*”出现在酒吧旁边。我不希望它被强调为验证失败。

我已经尝试了侦听器和客户验证器来解决这个问题，但是到目前为止没有什么工作是完全正确的。resetValue也不完全做我想要的，因为我不喜欢简单地重新选择用户刚刚取消选择的值。

我用的是PrimeFaces 6

实现这一目标的最佳方式是什么？

Answer 1

你的要求是不是有点愚蠢？如果selectOneMenu foo是必需的，那么selectOneMenu栏在任何情况下也是必需的。那么，如果选择了foo，为什么不干脆让bar也是必需的，而不是更新它呢？无论如何都要选择它。如果您包含您的需求，那么在选择项目后不显示“选择一个”选项怎么样，因为用户无论如何都必须选择一个选项。如果您仍然由您的观点组成，您可以尝试将bar的模型值设置为null，如果bar验证失败，使用像这样的PostValidateEventListener：

bean中的方法：

public void resetModelValue(ComponentSystemEvent event) throws AbortProcessingException {
    UIInput input = (UIInput) event.getSource();
    if (input.isValid()) {
        return;
    }
    input.getValueExpression("value").setValue(FacesContext.getCurrentInstance().getELContext(), null);
}

为bar注册PostValidateEventListener：

<p:selectOneMenu id="bar" ...>
    ...
    <f:event type="postValidate" listener="#{bean.resetModelValue}" />
</p:selectOneMenu>

然而，我认为这个解决方案并不能解决你所有的问题。