formly-js / angular-formly

JavaScript powered forms for AngularJS
http://docs.angular-formly.com
MIT License
2.22k stars 405 forks source link

angular formly use value in a templateOptions custom property for hideExpression #763

Open falinsin opened 6 years ago

falinsin commented 6 years ago

I want to hide the phone fiels if name field templateOptions custom property value is 'V1'

{
            "key": "name",
            "type": "text",
            "templateOptions": {
              "myCondition":"V1",
              "label": "Name"
            }

},
{
            "key": "phone",
            "type": "text",
            "templateOptions": {
              "label": "Phone"
            },
        "hideExpression": "model.name.templateOptions.myCondition=='V1'"        
}

but this way is not working.

How can I use templateOptions properties in hideExpression. How can I reference values in this properties for use in expresions in field definitions.

Thank you

egucciar commented 6 years ago

Can you make your condition a different input with a default value ? Why does it need to be in that config ? No you can't look up template options in model and there's no field dictionary Currently exposed on the scope I'm aware of

falinsin commented 6 years ago

Ok, I'll try that solution. I only wanted to be sure there aren't any other solution elegant solution.

My problem is i need to show/hide field in same form on depend of a fixed configuration value.

This JSON form is generated in the server but we use same form for five diferent modes selected in CSM and generated with PHP.

We wanted to add a fixed propierty in templateOptions originalModel and the field I want show/hide in a repeated-section on that originalModel.

Someting like this:

[

{
  "key": "PARENT",
  "type": "repeatSection",
  "className": "col-xs-12 margen-campos",
  "templateOptions": {
   "tipoContacto":"transportes",
    "btnText": "Nuevo contacto",
    "nombre_tipo": "contacto",
    "cod_tipo": "contacto",
    "angular_cod_tipo": "contacto",
    "fields": [
      {
        "key": "nombre",
        "type": "customInput",
        "templateOptions": {
          "label": "Nombre:",
        }   
      },
      {
        "key": "tlf1",
        "type": "maskedInput",
        "className": "col-xs-12 col-md-4 col-lg-3",
        "templateOptions": {
          "label": "Teléfono 1:",
        },
    "hideExpression": "formState.originalModel.PARENT.templateOptions.tipoContacto=='transportes'"
      }

] } ]

Is there any other way to do this?

Thanks

egucciar commented 6 years ago

AFAIK there is no way of doing this without writing some code, you can add something to formState to access as noted. you can add whatever u want to formState to share it across other components and to use inside expression. Personally what Id do is add those items in a dictionary to the formState. I recently did this by forking the repo and creating a formMap to add within the formState. formMap maps keys in the data model to the respective component's formControl. You can do something similar, probably without having to need to fork the repo, too. Since you can supply customizations to the templates that you register, u can register a controller to mutate formState however desired. Theres a lot of options.