angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms.

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

Introduction to angular-formly

The `type` functionality of the angular-formly library is powerful. In this lesson, see how you can use it to create custom templates for your field configurations and see what is available in the scope of each of your fields.

angular-formly: Custom Templates

AngularJS validation can be tough, but angular-formly makes it extremely simple with a single validation API that enables basic and advanced field validation. You can specify a string expression, function that returns true/false, or a function that returns a promise which is resolved/rejected.

angular-formly: Custom Validation

angular-formly provides a very simple API to dynamically change properties of your field (like disabled, hidden, and required) using the powerful expressionProperties property on your field.

angular-formly: expressionProperties

angular-formly templateOptions bring a great deal of power and flexibility to your forms with angular without sacrificing simplicity in your templates. The templateOptions property allows you to specify some attributes that would normally exist on your `ng-model` like `required`, `maxlength`, and even `ng-click`. It also works great with `expressionProperties`.

angular-formly: templateOptions

angular-formly allows you to default the values of fields for your angular forms using the `defaultValue` property. To default the value of a field, you can either initialize the `model` with the default value, or use this `defaultValue` property on the field configuration.

angular-formly: Default Values

angular-formly allows you to keep your forms as DRY as possible. The `optionsTypes` property is one way of composing your field configurations to keep your forms light-weight and DRY.

angular-formly: Default Options

Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. When use responsibly, they can make it much easier to manage common types, allowing you to add a bit of functionality to a common type.

...use angular-formly to create data-driven Angular 1 forms

Instructor

Course content (8 lessons)

Instructor