angular-formly example: Select Validation

Validate multiple select type from angular-formly-templates-bootstrap


Model Value

{}

Fields (note, functions are not shown)

[
  {
    "key": "currencies.currency1",
    "type": "select",
    "validators": {
      "customValidator": {
        "message": "Currency already selected"
      }
    },
    "templateOptions": {
      "label": "Currency 1",
      "options": [
        {
          "name": "Rupee",
          "value": "INR"
        },
        {
          "name": "Doller",
          "value": "$"
        },
        {
          "name": "Pound",
          "value": "Pound"
        },
        {
          "name": "Peso",
          "value": "MXN"
        }
      ]
    }
  },
  {
    "key": "currencies.currency2",
    "type": "select",
    "validators": {
      "customValidator": {
        "message": "Currency already selected"
      }
    },
    "templateOptions": {
      "label": "Currency 2",
      "options": [
        {
          "name": "Rupee",
          "value": "INR"
        },
        {
          "name": "Doller",
          "value": "$"
        },
        {
          "name": "Pound",
          "value": "Pound"
        },
        {
          "name": "Peso",
          "value": "MXN"
        }
      ]
    }
  },
  {
    "key": "currencies.currency3",
    "type": "select",
    "validators": {
      "customValidator": {
        "message": "Currency already selected"
      }
    },
    "templateOptions": {
      "label": "Currency 3",
      "options": [
        {
          "name": "Rupee",
          "value": "INR"
        },
        {
          "name": "Doller",
          "value": "$"
        },
        {
          "name": "Pound",
          "value": "Pound"
        },
        {
          "name": "Peso",
          "value": "MXN"
        }
      ]
    }
  }
]

Form

{
  "$error": {},
  "$name": "vm.form",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false,
  "formly_1": {
    "$error": {},
    "$name": "formly_1",
    "$dirty": false,
    "$pristine": true,
    "$valid": true,
    "$invalid": false,
    "$submitted": false,
    "formly_1_select_currencies.currency1_0": {
      "$validators": {},
      "$asyncValidators": {},
      "$parsers": [],
      "$formatters": [],
      "$viewChangeListeners": [],
      "$untouched": true,
      "$touched": false,
      "$pristine": true,
      "$dirty": false,
      "$valid": true,
      "$invalid": false,
      "$error": {},
      "$name": "formly_1_select_currencies.currency1_0",
      "$options": null
    },
    "formly_1_select_currencies.currency2_1": {
      "$validators": {},
      "$asyncValidators": {},
      "$parsers": [],
      "$formatters": [],
      "$viewChangeListeners": [],
      "$untouched": true,
      "$touched": false,
      "$pristine": true,
      "$dirty": false,
      "$valid": true,
      "$invalid": false,
      "$error": {},
      "$name": "formly_1_select_currencies.currency2_1",
      "$options": null
    },
    "formly_1_select_currencies.currency3_2": {
      "$validators": {},
      "$asyncValidators": {},
      "$parsers": [],
      "$formatters": [],
      "$viewChangeListeners": [],
      "$untouched": true,
      "$touched": false,
      "$pristine": true,
      "$dirty": false,
      "$valid": true,
      "$invalid": false,
      "$error": {},
      "$name": "formly_1_select_currencies.currency3_2",
      "$options": null
    }
  }
}
This is an example for the angular-formly project made with ♥ by Benjamin Orozco
This example is running angular version "1.4.7" and formly version "8.4.1"
Edit in JS Bin