angular-formly
JavaScript powered forms for AngularJS
angular-formly documentation for angular-formly: javascript powered forms for angular
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?
Source: (StackOverflow)
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.
Source: (StackOverflow)
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.
Source: (StackOverflow)
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?
Source: (StackOverflow)
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
Source: (StackOverflow)
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.
Source: (StackOverflow)
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!
Source: (StackOverflow)
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.
Source: (StackOverflow)
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. :)
Source: (StackOverflow)
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.
Source: (StackOverflow)
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?
Source: (StackOverflow)
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?
Source: (StackOverflow)
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?
Source: (StackOverflow)