Come attivare la convalida DataBinding per tutti i controlli?

Question

Ho un modulo OpenUI5 costituito da un numero di controlli di input. Questi controlli di input sono associati a un modello utilizzando OpenUI5 DataBinding come descritto in the documentation. Per esempio:

new sap.m.Input({       
    value: { 
     path: "/Position/Bezeichnung", 
     type: new sap.ui.model.type.String(null, { 
      minLength: 1, 
      maxLength: 128 
     }) 
    } 
}) 

Come nell'esempio sopra Sto utilizzando vincoli sulla StringLength. Quando un utente modifica il valore dell'ingresso, viene attivata la convalida e in base a Validationresult viene richiamata una delle funzioni descripted here. In queste funzioni sto impostando la ValueState del controllo in questo modo:

setupValidation: function() { 
    var oCore = sap.ui.getCore(); 
    oCore.attachValidationError(function (oEvent) { 
     oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error); 
    }); 
    oCore.attachValidationSuccess(function (oEvent) { 
     oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.None); 
    }); 
    oCore.attachFormatError(function (oEvent) { 
     oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error); 
    }); 
    oCore.attachParseError(function (oEvent) { 
     oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error); 
    }); 
}, 

Assumiamo la variabile legata modello è iniziale. Sto caricando la vista, il valore della proprietà viene analizzato e visualizzato come vuoto. Il metodo Validationerror/Parseerror è non chiamato sebbene i vincoli non siano soddisfatti. Questo sembra essere il comportamento standard di OpenUI5. Solo le modifiche nel Controllo saranno convalidate.

Ora supponiamo di avere un pulsante di invio e il valore di Inputcontrol è ancora vuoto. Quando l'utente preme il pulsante di invio, desidero attivare la convalida DataBinding per tutti i controlli figlio della mia vista. Ciò confermerebbe l'input sopra menzionato e comporterebbe uno stato di errore.

La mia domanda è: come posso attivare la convalida del databinding per tutti i controlli figlio della mia vista?

C'è un'altra domanda su SO dove il poster richiede un modo per definire i campi obbligatori. La soluzione proposta è chiamare getValue() sul controllo e convalidare il valore manualmente. Penso che questo sia un po 'macchinoso come la formulazione e le informazioni sui vincoli e la logica è già presente.

Answer 1

Non è possibile eseguire convalide di convalida dei dati. Piuttosto per i campi vuoti che stanno avendo la proprietà richiesta true puoi fare un lavoro con jQuery. Si prega di riferire la mia risposta a questo stesso problema a Checking required fields

Answer 2

Il concetto va così.

• Utilizzare i tipi personalizzati durante l'associazione per definire le convalide. Le regole di convalida passano all'interno di questi tipi personalizzati (nel metodo 'validateValue').

• Quando Invia viene premuto, passa attraverso la gerarchia di controllo e
  convalidare ciascun controllo nella visualizzazione. (Chiamando il metodo "validateValue"
  del tipo personalizzato).

Validator (https://github.com/qualiture/ui5-validator) utilizza questo concetto e si tratta di una piccola biblioteca per rendere la vita facile. Il suo vantaggio principale è che attraversa in modo ricorsivo la libreria di controllo.

Utilizzo di Message Manager (utilizzando sap.ui.get.core(). GetMessageManager()) è il modo di mostrare i messaggi di convalida sul controllo dell'interfaccia utente.

Answer 3

Suggerisco di esaminare i gruppi di campi.

Un esempio here in the UI5 docs

gruppi di campi consentono di assegnare gli ID di gruppo per i campi di input. Quindi puoi chiamare tutti i campi di input contemporaneamente. È possibile impostare separatamente la proprietà name e la proprietà required su ogni <Input>, consentendo di gestire alcune regole quando si esegue la convalida.

È possibile chiamare this.getView().getControlsByFieldGroupId("fieldGroupId"), che restituirà un array dei controlli di input. Quindi puoi scorrere i controlli, passarli attraverso la tua logica e usare setValueState() per mostrare i risultati.

Oppure, è possibile assegnare l'evento validateFieldGroup sul contenitore padre, che di solito è un modulo, ma può essere qualcosa come un <VBox> che contiene i controlli. Quando l'attenzione degli utenti si sposta fuori dal gruppo di campi, l'evento viene attivato. È quindi possibile utilizzare il gestore eventi nel controller per eseguire la convalida.

Nel tuo caso, assegnerei un evento press al pulsante di invio e nel gestore, chiama il gruppo di campi per ID e cicla attraverso i controlli. Alla fine della tua funzione, controlla se tutti i campi sono convalidati prima di continuare.

View

<Input name="email" required="true" value="{/user/email}" fieldGroupIds="fgUser"/> 
<Input name="firstName" required="false" value="{/user/firstName"} fieldGroupIds="fgUser"/> 
<Button text="Submit" press="onSubmit"/> 

controller

onSubmit: function() { 
    var aControls = this.getView().getControlsByFieldGroupId("fgUser"); 
    aControls.forEach(function(oControl) { 
     if (oControl.getRequired()) { 
      //do validation 
      oControl.setValueState("Error"); 
      oControl.setValueStateText("Required Field"); 
     } 
     if (oControl.getName() === "firstName") { 
      //do validation 
      oControl.setValueState("Success"); 
     } 
    }); 
    var bValidated = aControls.every(function(oControl) { 
     return oControl.getValueState() === "Success"; 
    }); 
    if (bValidated) { 
     //do submit 
    } 
}