Search code examples
javascriptangularjsformsschemaangular-schema-form

How to trigger validations with angular schema form?


Hi I'm using angular schema form and followed the instructions to validate the form fields, but when I submit the validation messages does not appear if some field is invalid.

Here is my schema:

    vm.schema = {
  "type": "object",
  "title": "Beneficiario",
  "required": [
    "beneficiaries"
  ],
  "properties": {
    "beneficiaries": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "number",
            "description": "Monto a transferir",
            "minimum": 1,
            "maximum": 500,
            "validationMessage": {
               101: "El valor de este campo debe ser de al menos {{schema.minimum}} Bs",
               103: "{{viewValue}} Bs es mayor que el máximo permitido para una transferencia: {{schema.maximum}} Bs",
               302: "Este campo es requerido"
            }
          },
          "spam": {
            "title": "Spam",
            "type": "boolean",
            "default": true
          },
          "description": {
            "type": "string",
            "maxLength": 20,
            "validationMessage": {
              201: "La longitud máxima permitida es de {{schema.maxLength}} caracteres",
              302: "Este campo es requerido"
            }
          }
        },
        "required": [
          "name",
          "description"
        ]
      }
    }
  }
};

And here is my form:

    vm.form = [
  {
    "type": "help",
    "helpvalue": "<h4>Transferencias y pagos</h4><h5>Lista de elementos seleccionados</h5>"
  },
  {
    "key": "beneficiaries",
    "title": "Selección",
    "autocomplete": "off",
    "add": null,
    "style": {
      "add": "btn-success"
    },
    "items": [
      {
        "key": "beneficiaries[].name",
        "title": "Monto Bs",
        "feedback": false
      },
      {
        "key": "beneficiaries[].spam",
        "type": "checkbox",
        "title": "Agregar a pagos frecuentes",
        "condition": "model.beneficiaries[arrayIndex].name"
      },
      {
        "key": "beneficiaries[].description",
        "title": "Descripción",
        "feedback": false
      }
    ],
    "startEmpty": true
  },
  {
    "type": "submit",
    "style": "btn-success btn-block",
    "title": "Agregar"
  }
];

I made a plunker with this: https://plnkr.co/edit/ogaO8MBmNtxYBPHR67NC?p=preview

So, the problem that I need to fix: when I submit the form. the validation messages does not appear if some field is invalid. If I do a click and are invalid fields I need to show that validation messages


Solution

  • Well, I answer myself. To trigger the form validations, you need to use $broadcast to trigger it.

    I added the code to my controller:

    vm.submit = function(){
      console.log("submit");
      // First we broadcast an event so all fields validate themselves
      $scope.$broadcast('schemaFormValidate');
    
      // Then we check if the form is valid
      if (vm.form.$valid) {
        // ... do whatever you need to do with your data.
      }
    };
    

    And added the ngSubmit method. (ctrl.submit()) and that's all, the validations appear :)

    I made a plunker if you need to see this in action:

    https://plnkr.co/edit/s7VbHPKNBHXxTCd7eKgZ?p=preview