Cancel Original Data State (oldData) Update From Built-In Save Action #125

Activity

1. mesqueeb commented on Mar 22, 2022

   

   mesqueeb

   on Mar 22, 2022

   Last edited by mesqueeb

   Member

   More actions

   This should be the case when using the built in validation system. Or is using this not an option for you?

   Can you show me some code so I can think about the best solution?
2. TimTraylor commented on Mar 23, 2022

   

   TimTraylor

   on Mar 23, 2022

   Last edited by mesqueeb

   Author

   More actions

   I was trying to address cross-field validation. So things like "If 'ACH' is chosen as a payment method, then checking account and transit routing numbers are required". Or generically, "If the value of 'foo' is A, B, or C then the value entered for 'bar' must be between 5 and 10'. Those types of things.

   So, what's being returned from an API call would look something like this (most schema fields removed for brevity):

   const apiResult = {
       schema: [ 
       {
         id: "accountNumber",
         component: "input",
         label: "Account number",
         required: true,
         dynamicProps: ['error'],
         error: (val) => (val != null && val.length == 10 ? null : 'Must be 10 characters'),
       },
      {
         id: "transitRouting",
         component: "input",
         label: "Transit Routing",
         dynamicProps: ['disabled'],
         disabled: (val, { formData }) => formData.paymentType != 'ach',
       },
     ...],
      validationFunctions: [
         function() {
           if (formData.value.paymentType == 'ach') {
               if (!formData.value.transitRouting) {
                   toaster.show('Transit routing is required for ACH.');
                   return false;
               }
               if (!Number(formData.value.transitRouting) || 
                   formData.value.transitRouting.length != 9) {
                   toaster.show('Transit routing must be numeric and 9 digits.');
                   return false;
               }
           }
           return true;
         },
       ]
     };

   And then the built-in save action button calls a function like this:

   function onSave(payload){
     
     let passedValidation = true;
   
     apiResult.validationFunctions.forEach(    
         function(func) {
           if (!func())
           {
             passedValidation = false;
             mode.value='edit';
             return;
           }
       }
     );
     
     if (!passedValidation){
       return;
     }
   
     toaster.show(`Would save the payload:` + JSON.stringify(payload, null, 2));
     clearForm();
     forceRemount.value++;
   }

   I'm doing a POC here, hence the showing of the error with toasters. The real thing would appropriately display the error on the page, styled as the built-in Blitzar errors are.

   I think you can see though that I'm using the built-in field-level validation for the values of the individual items, but then I'm also trying to implement a form-level process that can address cross-field validation.

   Thanks,
   Tim
3. mesqueeb commented on Apr 5, 2022

   

   mesqueeb

   on Apr 5, 2022

   Member

   More actions

   @TimTraylor can you add me on discord:
   Luca Ban [Mesqueeb]#4774
4. mesqueeb commented on Apr 5, 2022

   

   mesqueeb

   on Apr 5, 2022

   Member

   More actions

   @TimTraylor I tried to show you an example using dynamicProps for the error that would achieve something similar to what you showed me:

   {
     id: "transitRouting",
     component: "input",
     label: "Transit Routing",
     dynamicProps: ['disabled', 'error'],
     disabled: (val, { formData }) => formData.paymentType != 'ach',
     error: (val, { formData }) => {
       return formData.paymentType === 'ach' && !formData.transitRouting
         ? 'Transit routing is required for ACH.'
         : null
     }
   },

   just one example, but I can imagine that this way of writing your validation functions should be usable for the other things you wanted to achieve as well?
5. TimTraylor commented on Apr 8, 2022

   

   TimTraylor

   on Apr 8, 2022

   Author

   More actions

   Thanks Luca, that was just a simple use case of cross-field validation at the form level, but the idea was needing something to execute at the form level before allowing a submit to be 'successful'. If you have any complex multi-field validation, trying to attach that to just one of the fields can be difficult.

   I could certainly do it without using the built-in action buttons, but I really liked their ease of use.

   Thanks for replying - I appreciate the response!
6. mesqueeb commented on Apr 9, 2022

   

   mesqueeb

   on Apr 9, 2022

   Member

   More actions

   I can introduce a form level error prop that in checked when clicking the save action button.