How to use FormController with directives

0
votes

I'm trying to build widgets directives that play well with forms

The complete example is available at http://jsfiddle.net/jy81bchd/4/

The main idea is:

Write your own form, put widget in it

<form name="otherForm" novalidate ng-init="model = {name: 'test'}" novalidate> <swif-widget-text name="name" required="required" input-model="model.name"> <span translate>Name</span> </swif-widget-text> </form>

The widget directive copy all attributes to the input and transculde the contennt in the the label.

My differents problems are:

1) I can't update the formController of the main form, it doesn't find the different inputs throw directives. The best should be to use formcontrolller.addControl but I don't have succeed with it

2) To work around 1 I have tried to make each widget a different form. This is working execpt formcontroller doesn t update after link has been called (attributed copied to input doesn't affect the controller).

In the fiddle I copied required attribute to the input but if you empty the field it's still valid according to the formcontroller.

I have added name="input" also because if I copy name attribute to the input the form controller doesn't find any input.

Conclusion: From what I understand formcontroller is initialized and loaded before the link is called. How could I change that ?

1
angularjsangularjs-directive

1 Answers

1
votes

There are several posts about how to create your own form component that plays nicely with the form and the controller that is attached to that.

For instance: http://blog.revolunet.com/blog/2013/11/28/create-resusable-angularjs-input-component/

Examining your fiddle I have a few things you need to look at:

1) add a name and a controller to the form element in order to work with all form elements that live inside of it. Via the $scope that is injected in that controller you can handle the form elements (also add meaningfull names to your form elements).

2) And your custom component: - should use ng-model instead of input-model. - should require 'ngModel' in the Directive definition - in the link phase you get a reference to the ngModelController, and check the link above to see how you should interact with that to achieve a two way binding like behaviour. (using $viewValue, $render and $setViewValue)