EzDevInfo.com

Using Bootstrap Tabs with Angular Formly

Is there a way to include a "tab" structure in the formly json structure to build bootstrap-ui tabs easily? For example something kind of like this:

{
  Tabs: [
    {
      heading: 'Tab 1',
      fields: [
               ....
              ]
    },
    {
      heading: 'Tab 2',
      fields: [
               ....
              ]
    },
  ]
}

Is there an easy easy to build this type of structure? Or should I do an ng-repeat on the tabs array with formly inside the ng-repeat? Or are their performance concerns with that or any other concerns?

angular-formly issue with ui-select

I am trying to use Angular-Formly together with angular ui-select using $http for results.

The options should refresh as the user types in. When I set the model from another text input, the ui-select updates correctly and show the corresponding results based on what was typed into the text box.

When I however type straight into the ui-select box, I am not getting values back and the templateOptions.options function does not fire and the $viewvalue is not updated.

I also don't seem to have access to the $select.search results which are updated but are not available in the expressionProperties.

Please see the following JSBin that reproduces the error :

http://jsbin.com/peducofaje/edit

I would appreciate help on this.

writing custom control or widget in Angular

I want to build custome control or widget using Angular. I know how to build form using basic controls such as textbox, button etc. using Angular-Formly. Please, help me out how to do this. Suppose i want to create Slider on my page based on json then what are the steps I need to follow to create it. Thank you.

Automatically add hyphens to number field

My form has a few fields that need filters. For instance, there is a SSN field.

I am currently checking that the user has entered in the correct pattern (and displaying validation that it is wrong if need be). However, this requires the user to enter the hyphens themselves. What I would like to do is automatically adds the hyphens as the user enters their number.

How would I accomplish something like this? I already have a custom type that I created for the SSN field. Maybe in the controller of this custom field?

angular-upload not populating model when used with angular-formly

options.data.fieldToMatch

Hello everyone, please bear with me as this is my first post on StackOverflow. I've been an anonymous user for years and have always found the answers to my questions by searching. This one, however, perplexes me a bit.

I'm having an issue integrating angular-upload with angular-formly using angular 1.4. The form model is not getting updated when a file is selected.

I have a code example on jsbin at http://jsbin.com/cozanowure/edit?js, and the same code on plunkr at http://plnkr.co/edit/aDi8breDPFFGrNdzh2i4?p=preview

Below is the same code on the 2 above provided links:

Javascript:

(function() {
  'use strict';

  var app = angular
    .module('app', ['lr.upload', 'formly', 'formlyBootstrap']);

  app.run(['formlyConfig', function(formlyConfig) {
    formlyConfig.setType({
      name: 'licensefile',
      extends: 'input',
      defaultOptions: {
        ngModelAttrs: {
          multiple: {
            bound: 'ng-multiple',
            attribute: 'multiple'
          },
          accept: {
            bound: 'ng-accept',
            attribute: 'accept'
          }
        },
        templateOptions: {
          label: 'License File',
          type: 'file',
          required: true,
          multiple: false,
          accept: '*.lic'
        },
        validation: {
          messages: {
            required: function(viewValue, modelValue, scope) {
              //return scope.to.label + ' is required '
              return 'Please select a license file';
            }
          }
        }
      }
    });

    formlyConfig.setType({
      name: 'email',
      extends: 'input',
      defaultOptions: {
        templateOptions: {
          type: 'email',
          label: 'Email Address',
          placeholder: 'email address',
          pattern: '[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)',
          message: '$viewValue + " is not a valid email address"'
        },
        validation: {
          messages: {
            required: function(viewValue, modelValue, scope) {
              return 'Please enter an email address';
            },
          }
        }
      }
    });
  }]);

  app.controller('AppController', function() {
    var vm = this;
    vm.model = {};
    vm.fields = [{
      type: 'licensefile',
      key: 'lfile',
      templateOptions: {
        label: 'License File',
        focus: true,
      }
    }, {
      type: 'input',
      key: 'someTextField',
      templateOptions: {
        label: 'Some Text'
      }
    }];
  });
}());

Html:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="//rawgit.com/leon/angular-upload/master/angular-upload.min.js"></script>
    <script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
    <script src="//rawgit.com/formly-js/angular-formly/master/dist/formly.js"></script>
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.min.js"></script>

    <script src="app.js"></script>

    <link rel="stylesheet" rel='nofollow' href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="AppController as vm">
    <pre>{{vm.model | json}}</pre>
    <form name="fileForm" >
      <formly-form model="vm.model" fields="vm.fields" ></formly-form>
    </form>
  </body>

</html>

Any help and guidance in why the model isn't getting updated with the selected files would be greatly appreciated.

Thanks in advance, Michael

Doesn't show custom template with angularformly?

This is using angular-formly and i have created multiple-checkbox template as follows:

    <script type="text/ng-template" id="multi-checkbox-template.html">
<div class="radio-group"
     ng-class="{'has-error': options.formControl.$invalid}">
    <label class="control-label">
        {{options.label}}
        {{options.required ? '*' : ''}}
    </label>
    <div class="radio"
         ng-repeat="(key, option) in options.options">
        <label>
            <input type="checkbox"
                   formly-dynamic-name="id + '_'+ $index"
                   formly-custom-validation="options.validators"
                   id="{{id + '_'+ $index}}"
                   aria-describedby="{{id}}_description"
                   ng-value="option.value"
                   ng-required="options.required"
                   ng-model="$parent.model[$parent.options.key || $parent.index][option.name]">
            {{option.name}}
        </label>
        <p id="{{id}}_description"
           class="help-block"
           ng-if="option.description">
            {{option.description}}
        </p>
    </div>
</div>
</script>

This is config:

 formlyConfigProvider.setType(
      {
        name: 'multi-checkbox',
        templateUrl: 'multi-checkbox-template.html',
        wrapper: ['bootstrapLabel', 'bootstrapHasError']
      }

This is controller:

{
            "key": "Q2",
            "type":'multi-checkbox',
             "templateOptions": {
             "label": "What languages are you familiar with?",
             "options": [
                {                    {
                  "name": "spanish",
                  "value": "spnsh"
                },
                {
                  "name": "french",
                  "value": "frnch"
                },
                {
                  "name": "more",
                  "value": "more"
                }
              ]
            }

          }
        ];

Problem is that, doesn't show anything is the page even though error. I knew that path is correct regarding to the server response `GET /multi-checkbox-template.html 200 1ms This is warning i am getting,

angular-formly-bootstrap formly-field apiCheck failed! Required `label` not specified in `Argument 1/value/templateOptions`. Must be `String`  https://github.com/formly-js/angular-formly/blob/6.10.0/other/ERRORS_AND_WARNINGS.md#formly-field-type-apicheck-failed

You passed:
{
  "key": "Q2",
  "type": "multi-checkbox",
  "templateOptions": {
    "to.label": "In what languages does your firm provide live chat support?",
    "to.options": [
      {
        "name": "english",
        "value": "eng"
      },
      {
        "name": "spanish",
        "value": "spnsh"
      },
      {
        "name": "french",
        "value": "frnch"
      },
      {
        "name": "more",
        "value": "more"
      }
    ]
  },
  "$$hashKey": "object:592",
  "data": {},
  "validation": {
    "messages": {}
  },
  "id": "formly_1_multi-checkbox_Q2_5"
}

With the types:
{
  "key": "string",
  "type": "string",
  "templateOptions": {
    "to.label": "string",
    "to.options": {
      "0": {
        "name": "string",
        "value": "string"
      },
      "1": {
        "name": "string",
        "value": "string"
      },
      "2": {
        "name": "string",
        "value": "string"
      },
      "3": {
        "name": "string",
        "value": "string"
      }
    }
  },
  "$$hashKey": "string",
  "data": "Object",
  "validation": {
    "messages": "Object"
  },
  "value": "Function",
  "runExpressions": "Function",
  "resetModel": "Function",
  "updateInitialValue": "Function",
  "id": "string",
  "initialValue": "undefined"
}

The API calls for:
{
  "__apiCheckData": {
    "strict": false,
    "optional": false,
    "type": "shape"
  },
  "shape": {
    "templateOptions": {
      "__apiCheckData": {
        "strict": false,
        "optional": false,
        "type": "shape",
        "error": "THIS IS THE PROBLEM: Required `label` not specified in `templateOptions`. Must be `String`"
      },
      "shape": {
        "label": "String <-- YOU ARE MISSING THIS"
      }
    }
  }
}

` Please if there is any help i will be really thank you.

Angular Formly: Add class to formly-field based on validation

I would like to add specific classes to formly-field based on whether my question is valid or invalid. My questions are groups of radios. I'm using Angular-Formly.

Plunker: http://plnkr.co/edit/7qORbV2M5MHBG1H3nSaH

My form structure is coming in through JSON so I should probably create a template for questions and in that template set the class based on if the question in invalid or valid...just not sure how.

Thanks for any help!

how to use css classes inside angular formly

I am using angular formly. I read the documentation,but they didn't mention how to apply css classes from options. I am trying to apply kendo ui classes to form fields but of no use. Can anyone help me?

here is my jsbin

http://jsbin.com/golehimize/edit?html,output

How to write formly template to set ng-tags-input's auto-complete source?

I'm trying to write a custom formly template to use ng-tags-input:

angular.module('myMod').run(function(formlyConfig) {
    formlyConfig.setType({
        name:'tag',
        template:"<label class='control-label' ng-if='to.label'>{{to.label}}</label>" +
        "<tags-input ng-model='model[options.key]' ng-attr-placeholder='{{to.placeholder}}'>" +
        "<auto-complete source='{{to.tags}}'></auto-complete></tags-input>"
                        ^^^^^^^^^^^^^^^^^^^
    });
})

where to.tags refers to the formly template's templateOptions:

            templateOptions: {
                tags: 'dataModel.getProductTags()'

Using double-braces in this context causes a $parse error. How can I fill that source attribute indirectly from the content of to.tags?

I've also tried ng-attr-source='to.tags', with no luck.

I suspect I'm just not thinking of something obvious. If easy and sensible, please include relevant references.

Setting a model attribute to a value based on, but not equal to, the input in angular-formly

I'm trying to figure out how to parse a form entry to set the model attribute to something else; e.g., extracting the video ID of a youtube video from a URL input. Is there a way to use parsers/formatters (6.21 features?) to accomplish this easily? I hoped to find a good example for this, and maybe there is one somewhere, but perhaps this would make a good one if there's not.

Here is a working example of what I'm attempting to accomplish, but in multiple steps and without the use of parsers. Any help adapting the code to set model.videoID from a URL in a single step (or fewer than 3 steps, at least) would be very appreciated. Thank you for your help with this and my other past questions. :)

How to load angular-formly vm.fields from server

i am trying to use Angular-Formly to build dynamically forms starting from a set of .NET classes.

I serialize the class properties information in json and return that to Formly, but no fields is shown.

I follow suggestions find in: How to load angular-formly vm.fields object from remotely-generated json? but not seems to work for me.

My form code is:

<form ng-submit="vm.onSubmit()" novalidate>
   <formly-form model="vm.model" fields="vm.formFields">
      <button type="submit" class="btn btn-primary submit-button">Submit</button>
   </formly-form>
</form>

The angular code is:

<script>
    /* global angular */
    (function () {
        'use strict';

        var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
            // set templates here
            //formlyConfigProvider.setType({
            //    name: 'custom',
            //    templateUrl: 'custom.html'
            //});
        });

        app.factory('User', function ($http) {
            return {
                getFields: getFields
            };

            function getFields() {
                return $http.post('TestFormly.aspx/LoadData', { headers: { 'Cache-Control': 'no-cache' } });
            }
        });

        app.controller('MainCtrl', function MainCtrl($scope, $http, User) {
            var vm = this;
            // funcation assignment
            vm.onSubmit = onSubmit;

            vm.loadingData = User.getFields().then(function (result) {
                vm.fields = JSON.parse(result.data.d);
                vm.originalFields = angular.copy(vm.fields);
            });

            vm.model = {
            };

            // function definition
            function onSubmit() {
                alert(JSON.stringify(vm.model), null, 2);
            }
        });
    })();
</script>

The CSharp.Net code is:

    [WebMethod]
    public static string LoadData()
    {
        string retValue = null;

        List<FieldItem> m_fields = new List<FieldItem>();

        FieldItem item1 = new FieldItem();
        item1.key = "text";
        item1.type = "input";
        item1.templateOptions = new TemplateOptions() { label = "Text", placeholder = "Formly is terrific!" };

        FieldItem item2 = new FieldItem();
        item2.key = "story";
        item2.type = "textarea";
        item2.templateOptions = new TemplateOptions() { label = "Some sweet story", placeholder = "It allows you to build and maintain your forms with the ease of JavaScript :-)" };

        m_fields.Add(item1);
        m_fields.Add(item2);

        retValue = JsonConvert.SerializeObject(m_fields);

        return retValue;
    }

The JSON result is:

[
    {
        "key":"text",
        "type":"input",
        "templateOptions":{
            "label":"Text",
            "placeholder":"Formly is terrific!"
        }
    },
    {
        "key":"story",
        "type":"textarea",
        "templateOptions":{
            "label":"Some sweet story",
            "placeholder":"It allows you to build and maintain your forms with the ease of JavaScript :-)"
        }
   }
]

Debugging with firebug i see the JSON passed correctly to the vm.fields but no input box is shown, only the Sumbit button.

I noticed that nor the Formly example shows the fields.

Can you help ?

Thanks in advance, Giuseppe.

what does the fc.$error do in AngularJS formly?

I am learning how to use angular js formly, and saw this example about required field. http://angular-formly.com/#/example/other/toggle-required

But I don't really understand ng-messages="fc.$error" here. Why it is fc.$error? where does the fc come from? I changed the fc to any other name, then it stops working....

so confused, anyone could explain? Thanks!

How to add data type as date in angular formly?

Is it possible to add input type as date in angular formly.? I was trying it using type:date but it is not defined in it. So, how to get it?

Extending Field for End Template

I am looking for a way to extend the standard fields in angular-formly to have things like a help icon for some fields, or custom template after the field.

Is there a way to extend it the base field to have a custom template just for after each field without having to redefine every field template?

Angular Formly - RichEditor

I need to create a form section template, so users can add/remove a new html form section on the fly.

I'm using Angular-Formly for the form template. It works really well for me. However, I need to include a rich editor inside of my form

Can anyone here please provide direction for how to do that? Can I write a angular directive to wrap a .Net rich editor in there? Has Angular-Formly provide a richEditor type or template already?