CODEWITHSUNDEEP
angularjsangular-formly
Holt
Holt

Reputation: 452

Require fields from a directive field type

Reference this example: http://jsbin.com/cenugiziju/edit?html,js,output

I have created a directive: example-directive This directive is made up of a templateUrl which has a label and an input within this html file. This field is marked as required within vm.formFields.

If you take a peek down within the Form section, you will notice that $valid is already set to true even though the required directive is not populated. I would have expected this to be false.

Is there a way to make Formly require fields that are brought in from a custom directive which has fields on it?

Upvotes: 0

Views: 466

Answers (1)

Jony-Y
Jony-Y

Reputation: 1579

ok sorry about the mixup and delay. I have created the answer you were looking for. because you are entering a directive you actually need to send the options to that directive with the values you need... this is the working example... this means though you will need to handle all the validations and so on yourself since you are not generating the element via FormalyJS but in your own directive.(make sure there is no other way to do it...)

this is the corrected code with required/ maxlength /minlength:

jsbin

what I actually did was pass the options for the Formly to my directive and add the validations to it

   app.directive('exampleDirective', function() {
return {
  templateUrl: 'example-directive.html',
  scope:{
    options:'=options',
    ngModel:'=ngModel'
  },
  link:function(scope, element, attrs){
    scope.isRequired = scope.options.templateOptions.required;
    scope.minValue = scope.options.templateOptions.min;
    scope.maxValue = scope.options.templateOptions.max;
  }
};

});

<script type="text/ng-template" id="example-directive.html">
  <div class="form-group">
    <label for="{{::id}}">{{options.templateOptions.label}}</label>
    <input id="{{::id}}" name="{{::id}}" class="form-control" ng-model="ngModel" ng-required="isRequired" ng-minLength="{{minValue}} ng-maxLength={{maxValue}}"/>
  </div>
</script>

this is the addition to the template in the vm.formFields template: ''

so now when you want to add a field you will need to pass the data to the directive and in the directive add the corresponding code... I am not hugely familiar with Formly, but this is the solution that I can give you

NOTE: I pass the option item to the directive because this is how FormalyJS constructs it.... you can always use your own... but since it renders after the formly directive, figured it would be easier

EDIT

here is an updated JSBIN

you can see that I had to add to the directive the ngModel... you can also do it by require and then use it, I prefer to do it like this... but you have to pass it to the div defining the directive... checkout the updated code

Upvotes: 2

Related Questions