HTML Forms

Rails provides great support for forms with its form helpers, and gems such and Simple Form and Formtastic make this support even better. They provide great DSLs that not only DRY up HTML forms, but also great integration with validation errors.

Unfortunately, we lose all this goodness when we switch to using Angular. Or do we? Well... yes we do, but with some of the functionality that we provide, we get some of it back:

DRYing Up Forms

We provide a set of simple directives to DRY up HTML forms, somewhat in the style of Simple Form or Formtastic. These directives can be found in the FormBuilder Angular module.

Their documentation sheds some light on how they work, and how they work together, but the easier way to learn how to use them is through some examples. In order of usage complexity, see the Angular views for:

• Editing a post
• Editing a user
• Creating a new user

See also their corresponding Angular controllers. These supply the above views with the data they need. Look for the actions in the brackets alongside:

• PostsCtrl (actionEdit, actionUpdate)
• UsersCtrl (actionEdit, actionUpdate, actionNew, actionCreate)

CSRF Protection

Using 'raw' HTML forms in Angular (since we have no access to Rails' form helpers) does not play well with CSRF protection. Fortunately, the ng-rails-csrf gem comes to our rescue, by automatically adding the CSRF token to HTTP headers. All we do is include this gem.

Integration With Server Side Form Validation

A benefit of using something like Angular is that you can have snappy client side form validation whenever possible, and save the time and effort needed for a server round-trip. However, client side validation may not cover all cases, and even if it does, leads to code duplication.

We provide a very simple way for Angular forms to integrate with server side validation, such as adding the ng-invalid classes, and displaying the errors returned from the server, for the affected form fields.

NOTE: We could have used Angular's built-in ng-messages functionality, and eventually we will get around to it. However, for now we have our own 'homegrown' implementation which is what it is.

This integration requires no change on the server side. It works via the fb-errors directive, which can be used standalone, or together with the fb-field directive. Both these directives are part of the FormBuilder Angular module.

Their docs provide sufficient usage instructions.

You can also see some actual usage by studying the views and controllers enumerated above.

Confirming Navigation Away From a "Dirty" Form

A form is "dirty" if there are as yet unsaved fields. In such cases, it is good to warn the user if they try to navigate away to another page. This is easily done using the confirm-dirty-form directive. Note that this directive actually lives in the RouteUtils Angular module, not in FormBuilder.

Its documentation provides sufficient usage instructions.

You can also see some actual usage by studying the views and controllers enumerated above.