如何使用角度架构表单触发验证?

时间:2016-02-10 16:29:14

标签: javascript angularjs forms schema angular-schema-form

您好我使用angular schema form并按照说明验证表单字段,但是当我提交验证邮件时,如果某些字段无效,则不会显示。

这是我的架构:

    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"
        ]
      }
    }
  }
};

这是我的表格:

    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"
  }
];

我用这个做了一个傻瓜:https://plnkr.co/edit/ogaO8MBmNtxYBPHR67NC?p=preview

所以,我需要解决的问题是:当我提交表单时。如果某些字段无效,则不会显示验证消息。如果我点击并且是无效字段,我需要显示验证消息

1 个答案:

答案 0 :(得分:2)

好吧,我回答自己。要触发表单验证,您需要使用$ broadcast来触发它。

我将代码添加到我的控制器:

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.
  }
};

并添加了ngSubmit方法。 (ctrl.submit())就是这样,验证出现了:)

如果你需要看到这一点,我就成了一名傻瓜:

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