2016-02-10 34 views
1

嗨我使用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" 
    } 
]; 

我做了這樣一個plunker:https://plnkr.co/edit/ogaO8MBmNtxYBPHR67NC?p=preview

所以,我需要解決的問題:我提交表格時請提供。如果某些字段無效,則不會顯示驗證消息。如果我點擊並且是無效的字段,我需要顯示驗證消息

回答

1

那麼,我回答自己。要觸發表單驗證,您需要使用$ 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()),這一切,在驗證出現:)

我做了一個plunker如果你需要看到這個動作:

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