Idea for a new Flame.FormView

[guilhermeaiolfi]

I'm not using flamejs FormView because I like to have control over the layout and put the fields where I want.

So I tried something today and I would like your opinion on this.

So basically you can create your form just like you're used to in HTML:

{{#view TC.Form class="form-horizontal" validatorsBinding="controller.validators" viewName="form"}}
        <fieldset>
          <div class="control-group">
            <label class="control-label">* Name:</label>
            <div class="controls">{{view TC.TextField valueBinding="controller.selected.name" viewName="name"}}</div>
          </div>
         <<< ANY OTHER FIELD HERE >>>
        </fieldset>
        <div class="form-actions">
          <button {{action "save" target="controller"}} class="btn btn-primary">Salvar</button>
          <button {{action "back" target="controller"}} class="btn">Cancelar</button>
        </div>
    {{/view}}

The only thing you need to do is use viewName in your fields so you can ref them in your validators that are in the controller. In your controller you have something like that:

validators: [
                { field: 'name', validator: 'required', message: "Name is mandatory" },
                { field: 'name', validator: function(field) { return field.get('value') != "123"}, message: "Your name can't be 123" }
            ],
save: function() {
    var form = this.view.getPath("form");
    if (form.validate()) {
        // do its thing
   }
}

And fields would show errors messages and add css classes to DOM elements and such.

How so?

 TC.Form = Ember.View.extend({
            classNames: "ember-form",

            formFields: Ember.computed(function() {
              var childViews = this.get('_childViews');

              var ret = Ember.A();

              Ember.ArrayUtils.forEach(childViews, function(view) {

                if (view.isFormField) {
                    ret.push(view);
                }
              });

              return ret;
            }).property().cacheable(),

            clearErrors: function() {
                var form_items = this.get('formFields');
                this.$(".error .help-inline").remove();
                for(var i = 0; i < form_items.length; i++)
                {
                    form_items[i].$().parents(".control-group").removeClass("error");
                }                
            },

            validate: function() {
                var errors = 0;
                var formFields = this.get('formFields');
                this.clearErrors();

                for (var i = 0; i < this.validators.length; i++)
                {
                    var validator = this.validators.objectAt(i);
                    var field = this.getPath(validator.field);
                    var func = Ember.typeOf(validator.validator) == 'string'? TC.Form.defaultValidators[validator.validator] : validator.validator;

                    Ember.assert("Validator for: " + validator.field + ", is not a valid function", !func);

                    var message = validator.message;
                    var field_valid = func(field, this, validator);
                    if (!field_valid) {
                        this.error(field, message);
                        errors++;
                    }
                    else {
                       this.valid(field)
                    }
                }
                return errors == 0;
            },

            valid: function (field) {
                 if (field) {
                    field.$().parents(".control-group").removeClass("error");
                    field.$().next(".help-inline").remove();
                }
            },
            error: function(field, message) {
                if (field) {
                    field.$().parents(".control-group").addClass("error");

                    if (field.$().next(".help-inline").length === 0)
                        field.$().parents(".controls").append("<span class=\"help-inline\">" + message + "</span>");
                }
            }
        });

        TC.Form.reopenClass({
            defaultValidators: {
                        required: function(field) { return field.get('value') != ''; },
                        number: function(field, form, params) { 
                            var max = params.max;
                            var min = params.min;
                            var value = field.get('value');
                            if (parseInt(value) != value || value < min || value > max) return false;

                            return true;
                        }
                    }
        });

This code would show errors for a Bootstrap based layout. But I've done a version showing all errors on the top of the form. It's pretty flexible and shouldn't be a problem create one that shows errors like Flame.FormView does.