Can i validate HTML or other controls using Form-for

[akhare22sandeep]

Hi Brian,
Can I use Form-for module just for validating the my own HTML form without any of the Form-for control fields ? I really like the tool tip error messages.

[bvaughn]

Hi @akhare22sandeep,

I'm not sure I understand your question. Are you saying that you want to make your own form HTML/markup but use the formFor library just for validation (without any of the formFor UI)? If so, then that really isn't something formFor supports, although another one of my libraries (like Forms JS) may be of interest to you.

If this isn't what you're asking, please give me an example or something to help me better understand. :)

[akhare22sandeep]

Thanks for your replay Brian !
I have updated the question and you are right ! I am using Kendo UI controls and Pure html controls in my markup. Let me check Form JS. Do you have any demo link for Forms JS ?

[bvaughn]

I see. formFor wasn't really created with that use-case in mind, although a friend recently mentioned something similar and I think it would be a neat idea to try to add support for in the next major release of formFor. I would need to finish my protractor testing effort first though so I could be confident I don't introduce any regressions.

You could probably use the Forms JS validators in your own project if you want. I wrote them to be pretty flexible. (I wasn't sure how many libraries we'd be using them with.) Unfortunately, Forms JS kind of stalled. I had initially hoped that the other contributors would have more time to contribute and when that wasn't happening, I decided that I didn't have the bandwidth to really take it on solo. It's unfortunate though because I think it got off to a strong start (and would have been the type of thing you are looking for).

But if you want to just use certain parts of the formFor UI (like errors and tooltips) you'd be better of forking and pulling out the directives/templates/styles. formFor was kind of written to be the whole solution vs being modular in that way.

[bvaughn]

Going to close this issue for now as it's not a feature currently on the roadmap for formFor (mostly because I just don't have enough spare time to do that kind of refactoring).

If someone else would like to get involved and help- I think this would be a worthwhile goal and I'd be happy to support the effort.

[indrimuska]

What about a specific directive that uses transclusion?

Let's have a checkbox-field, its template is defined here. Maybe we can create a custom-field (with transclusion) that looks like this:

<custom-field>
   Some custom text
   <input
          some-custom-directive="true"
          aria-manager
          id="{{model.uid}}"
          name="{{attribute}}"
          type="checkbox"
          tabindex="{{tabIndex}}"
          ng-model="model.bindable"
          ng-checked="checked"
          ng-disabled="disable || model.disabled"
          ng-change="changed()">
</custom-field>

I don't know if it's already possible to do that, but I will try soon.

[bvaughn]

That's an interesting compromise idea, @indrimuska. I'll re-open this issue for now if you're interested in exploring that route. :)

[indrimuska]

Today I tried to create my first transcluded-field directive, starting from the guide in the Creating a custom field section.

The basic idea is very simple and easy to code, this is my plunker.

What do you think about it @bvaughn? I know, it's just a sketch, but I think it fits perfectly @akhare22sandeep's needs.

[bvaughn]

Hi @indrimuska,

That's a pretty promising start! I like the direction.

I'm not sure I understand your comment in the scope about "every single option" being necessary. Could you elaborate?

[indrimuska]

I mean that (transcluded) scope is restricted only to those variables you set in the scope option of the directive, and you can't use any other attribute of any parent scope.

In the previous plunker I've set scope option like this:

scope: {
   attribute: '@',
   options: '=',
}

But what if I have a text input and I want to set a dynamic placeholder? Simply I can't do it, because placeholder is not in the scope (check out this plunker and try to uncomment script.js at line 28).

I don't know what is the best solution for this use case, I think that we have to set every single attribute we want to support into the scope option.

We could have an optional "jolly" attribute to pass a custom object:

scope: {
   // all supported attributes first
   attribute: '@',
   placeholder: '@?',
   // ...
   // the "jolly" one :)
   custom: '=?'
}

So that we can use it into the transcluded scope (plunker):

<div ng-init="custom={description: 'my field description' }">
   <transcluded-field attribute="name" custom="custom">
      <input placeholder="{{placeholder}}">
      <p>{{custom.description}}</p>
   </transcluded-field>
</div>

[bvaughn]

What if you got rid of the isolate scope and transclusion entirely?

  .directive('altField', ['FieldHelper', function (FieldHelper) {
    return {
      restrict: 'E',
      require: '^formFor',
      transclude: true,
      template: '<span ng-transclude></span>',
      link: function ($scope, $element, $attributes, formForController, transclude) {
        // FieldHelper expects an 'attribute' property on $scope
        $scope.attribute = $attributes.attribute;
        FieldHelper.manageFieldRegistration($scope, $attributes, formForController);
      }
    };

Here's an updated Plunker.