在 ui:repeat 中使用 Omnifaces validateAllOrNone 组件答案

【问题标题】：Using Omnifaces validateAllOrNone component into ui:repeat在 ui:repeat 中使用 Omnifaces validateAllOrNone 组件
【发布时间】：2017-09-21 11:32:28
【问题描述】：

我有以下问题：

我尝试在 ui:repeat 中使用 o:validateAllOrNone 组件，效果很好。但它不适用于我的复合组件。

我的复合组件实际上是简单的 p:inputText，用于舒适地输入电话号码。在那里，我使用了 javascript，它提供了使用不同电话号码 (inputPhoneNumber) 的工作。

<p:inputText id="#{cc.attrs.id}" type="tel" label="Номер телефона" value="#{cc.attrs.value}" required="#{cc.attrs.required}"
             styleClass="#{cc.attrs.styleClass} m-pad-left50" style="#{cc.attrs.style}">
</p:inputText>

<script>
    $("#{cc.fullId}").intlTelInput(
        {
            utilsScript: "intl-tel-input/js/utils.js",
            autoHideDialCode: false,
            nationalMode: false,
            preferredCountries: [#{cc.preferredCountries}],
            onlyCountries: [#{cc.countries}],
            dropdownContainer: 'body'
        }
    );
</script>

我还有创建联系人的表格，例如电话号码、电子邮件、Skype 等。该表格允许创建联系人列表。如果联系人类别是电话号码或者简单的输入文本，我已经使用了我的复合组件：

<ui:repeat value="#{bean.contacts}" var="contact">
    <p:selectOneMenu id="contact_type" value="#{contact.type}">
       ...
    </p:selectOneMenu>

    <p:outputPanel rendered="#{contact.category.equals(category.PHONE)}">
        <mycomponent:inputPhoneNumber id="contact_phone_value" value="#{contact.value}" preferred="ru">
        <o:validateAllOrNone components="contact_type contact_phone_value"/>
    </p:outputPanel>

    <p:outputPanel rendered="#{ne contact.category.equals(category.PHONE)}">
        <p:inputText id="contact_other_value" value="#{contact.value}"/>
        <o:validateAllOrNone components="contact_type contact_other_value"/>
    </p:outputPanel>
</ui:repeat>

我使用 o:validateAllOrNone 来检查联系人类型和他的值不为空。它适用于 p:inputText 但是当我尝试将此组件用于 mycomponent:inputPhoneNumber 时，我发现了以下例外：

异常消息：ValidateAllOrNone 属性“组件”必须引用现有的客户 ID。找不到客户 ID“contact_type”。

我找到了the question 的问题，我知道如何充分了解ui:repeat。之后我重写了我的代码：

<ui:repeat id="contact_list" value="#{bean.contacts}" var="contact" varStatus="status">
    <p:selectOneMenu id="contact_type" value="#{contact.type}">
       ...
    </p:selectOneMenu>

    <p:outputPanel rendered="#{contact.category.equals(category.PHONE)}">
        <mycomponent:inputPhoneNumber id="contact_phone_value" value="#{contact.value}" preferred="ru">
        <o:validateAllOrNone components="contact_creation_form-contact_list-#{status.index}-contact_type contact_phone_value"/>
    </p:outputPanel>

    <p:outputPanel rendered="#{ne contact.category.equals(category.PHONE)}">
        <p:inputText id="contact_other_value" value="#{contact.value}"/>
        <o:validateAllOrNone components="contact_type contact_other_value"/>
    </p:outputPanel>
</ui:repeat>

现在我已经为联系人类型输入了正确的 ID，但我发现了同样的异常：

异常消息：ValidateAllOrNone 属性“组件”必须引用现有的客户 ID。客户编号找不到“contact_creation_form-list-2-contact_type”。

我该如何解决这个问题？

【问题讨论】：

标签： primefaces jsf-2.2 omnifaces

【解决方案1】：

我应该从另一边去。获取复合组件的完整 ID 并在 o:validateAllOrNone 处使用它很容易。它解决了这个问题。在这种情况下，复合组件的正确 ID 是 contact_phone_value-contact_phone_value。之后的代码看起来像：

<ui:repeat value="#{bean.contacts}" var="contact">
    <p:selectOneMenu id="contact_type" value="#{contact.type}">
       ...
    </p:selectOneMenu>

    <p:outputPanel rendered="#{contact.category.equals(category.PHONE)}">
        <mycomponent:inputPhoneNumber id="contact_phone_value" value="#{contact.value}" preferred="ru">
        <o:validateAllOrNone components="contact_type contact_phone_value-contact_phone_value"/>
    </p:outputPanel>

    <p:outputPanel rendered="#{ne contact.category.equals(category.PHONE)}">
        <p:inputText id="contact_other_value" value="#{contact.value}"/>
        <o:validateAllOrNone components="contact_type contact_other_value"/>
    </p:outputPanel>
</ui:repeat>

另外你应该知道我使用 '-' 而不是 ':' 作为 id 分隔符。

【讨论】：