Comments (21)
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. :)
from angular-form-for.
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 ?
from angular-form-for.
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.
from angular-form-for.
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.
from angular-form-for.
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.
from angular-form-for.
That's an interesting compromise idea, @indrimuska. I'll re-open this issue for now if you're interested in exploring that route. :)
from angular-form-for.
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.
from angular-form-for.
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?
from angular-form-for.
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>
from angular-form-for.
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.
from angular-form-for.
Really beautiful and clean solution, but it has a little problem with the naming system.
Doing this, you allow the user to override attributes required to perform a correct behavior of the plugin, the simplest example is using a controller named model
with an attribute named bindable
:
<html ng-app="myApp" ng-controller="Controller as model">
.controller('Controller', ['$scope', function ($scope) {
this.bindable = 'hello world';
})
See this plunker. As expected, nothing works fine if someone uses these "special" names, not even validation on submit.
from angular-form-for.
Hmm. That's fair, although I think it's probably pretty unlikely to occur.
That being said we could address this by refactoring to use a more "private" naming convention (e.g. $model.bindable
). I'm not convinced that's necessary or worth it. (It would require anyone with custom fields or other overrides to make changes.)
I'm tempted to say that we could just avoid this unlikely case with clear documentation. What are your thoughts?
We could even check for the presence of such a $scope
property and throw an error (or console.warn
).
from angular-form-for.
Wow. I totally clicked "close and comment" without meaning to. Sorry.
from angular-form-for.
I don't know, the more I try to use this solution, the more I found some little issues.
Now the problem is the loss of two-way binding between model.bindable
and ctrl.myInput
(data inside the main controller scope).
The line that you have inserted - $scope.attribute = $attributes.attribute
, required by FieldHelper - allows the correct behavior of the plugin just for internal purposes, I mean just for validation and error reporting. But it doesn't bind to the original field, so that any change to model.bindable
doesn't reflect the data it represent (maybe we could perform 2-way binding manually).
Check this plunker.
from angular-form-for.
I'm not sure I see what you're describing. I updated my original plunker (see here) to also log the form-data value on submit and it's got an updated value like I'd expect.
Edit: Your Plunker had an error in it. You were referencing ctrl.myInput
when you should have been referencing ctrl.data.myInput
. Check out the updated Plunker here: http://plnkr.co/edit/EBtKwbzXHnUZJqQTyutN?p=preview
from angular-form-for.
Oh you're right, the problem was mine, your plunker seems to work well.
Just another question: does your solution works even if there are 2 (or more) transcluded-field inside the same form? Since there is no longer a private scope for the directive, all fields share the same scope, so that if one of them updates an attribute (e.g. model.bindable
) it reflects to every other transcluded-field that makes use of attributes with this same name (model.bindable
inside the other field).
Check out this updated punker.
from angular-form-for.
Hah! Good point!
I'm at a bit of a loss at the moment. Tried a couple of things in a local copy but without any luck.
from angular-form-for.
I'm still here, I haven't forgot this issue. 😄
I am currently using a solution with 5 attributes, one of which is the custom
attribute that I already wrote (the "jolly").
That's the behavior of my personal transcluded-field
:
http://plnkr.co/edit/CtW1IWHSH3YD96gDaFQK?p=preview
I think that there's no need to add all possible attributes in the transcluded scope, just because, for example, if I have a <select>
I don't necessarily have to use the attribute options
(with this name), and so for all kind of input. Users can update their view, so they can use other naming system or other objects. The only attributes they need are the ones for validation, that's why I added a <field-error>
element in my template.
EDIT: this version makes use of an HTML placeholder (<span class="placeholder"></span>
) to let user choose where to put the transcluded content. The reason why I haven't used a simple ng-transclude
directive si that it creates a new isolated scope, so that I can't bind the parent attributes.
from angular-form-for.
Hi again @indrimuska :)
Your approach seems reasonable. Would you like to create a PR for me to take a look at?
from angular-form-for.
Yes, I could try, but please be generous with me, I coded with typescript just one time! 😄
from angular-form-for.
Of course :)
On Saturday, September 5, 2015, indrimuska [email protected] wrote:
Yes, I could try, but please be generous with me, I coded with typescript
just one time! [image: 😄]—
Reply to this email directly or view it on GitHub
#146 (comment)
.
from angular-form-for.
Related Issues (20)
- Form is submitted when required checkboxes are not checked HOT 8
- Feature request: never validate not-required blank/empty/unchecked inputs HOT 4
- text-field should support input filters HOT 9
- No option to add multiple custom rules to the same field HOT 4
- Checkbox Fix Release HOT 1
- Problem with latest release HOT 9
- Formatting - Select-field HOT 2
- Enable number fields HOT 6
- checkboxField change event does not fire HOT 1
- increment validation HOT 4
- Minimum/maximum rule doesn't work when number is zero HOT 9
- SelectField auto selects the last option initially HOT 6
- Plans for Angular 2? HOT 2
- Support for asynchronous schemas HOT 2
- JSON Schema support HOT 1
- Add support for latest angular-material version HOT 3
- TypeError: Cannot read property 'unwatchers' of undefined HOT 4
- The homepage is dead HOT 1
- Dynamically change validationRules depending on submit action
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-form-for.