Merida Design Blog

Publicado el | Recursos / ,

Angular-Formly: Sencillos, poderosos y flexibles formularios para AngularJS

Angular-Formly es un módulo de AngularJS que cuenta con una directiva para personalizar y pintar formularios configurados a través de JavaScript/JSON. La directiva formly-form y el servicio formlyConfig hacen que que los formularios de tu aplicación sean muy fáciles de mantener y escalar.

Características

  • Plantillas integradas para Bootstrap, LumX, y HTML puro, también se puede extender con plantillas para angular-material, Ionic y Foundation.
  • Campos totalmente personalizables (se puede especificar un modelo para el formulario o por campo específico).
  • Las plantillas prediseñadas reducen la cantidad de código que debes escribir, manteniendo así un estilo consistente y evitando una completa pesadilla en el mantenimiento de éstas.
  • Funcionalidad para resetear un modelo.
  • Manipuladores de plantillas que permiten modificar las plantillas programáticamente.
  • Las expressionProperties hacen mas fácil la manipulación de los campos mientras el usuario interactúa con ellos.
  • Con defaultOptions para los tipos de campo, evitas la repetición innecesaria de código.
  • Entre otras…

Para hacer más claras las ventajas de usar este módulo veamos un ejemplo:

Código sin Angular-Formly

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="vm.user.email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.user.password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile" ng-model="vm.user.file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="vm.user.checked"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</form>

 

Código con Angular-Formly

<formly-form model="vm.user" fields="vm.userFields">
  <button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</formly-form>

  function YourCtrl() {
  var vm = this;

  vm.user = {};

  vm.userFields = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        type: 'email',
        label: 'Correo electrónico',
        placeholder: 'Correo electrónico'
      }
    },
    {
      key: 'password',
      type: 'input',
      templateOptions: {
        type: 'password',
        label: 'Contraseña',
        placeholder: 'Contraseña'
      }
    },
    {
      key: 'file',
      type: 'file',
      templateOptions: {
        label: 'Subir archivo',
        description: 'Elige la imagen que deseas subir para... bla bla bla',
        url: 'https://example.com/upload'
      }
    },
    {
      key: 'checked',
      type: 'checkbox',
      templateOptions: {
        label: 'Seleccioname'
      }
    }
  ];
}

Pero eso no es todo, Angular-Formly cuenta además con validación, interacción y muchas otras cosas.

Página: http://angular-formly.com
Github: https://github.com/formly-js/angular-formly
Documentación: http://docs.angular-formly.com/



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: