Add custom fields but avoid angularjs formly wrapper when render form
up vote
0
down vote
favorite
I created two angularjs formly custom field with custom template.
formlyConfig.setType({
name: '
wrapper-init',
template:
''
});
formlyConfig.setType({
name: 'wrapper-end',
template: '</div>'
});
What I want is use them for Wrap other Angularjs formly field between this two custom fields so We can group and separate groups of fields visually by wrapping them in layers that will be given appearance with css.
But Angularjs formly render all custom field with extra div and even close my no closed tag in my custom template fields.
This is what a need to render formly:
<div class="tag-wrapper-init">
...... some AngularJs formly fields like inputs and textareas ....
</div>
How can I create custom fields in AngularJs formly so I avoid Formly Wrap them with a
<div formly-field="" ...
Is this possible?
I have tried to make clear the idea of what I need but if I have not done well or it is not understood, comment on it to improve it but please need help on this.
angularjs angular-formly
asked Nov 9 at 4:27
Falinsito
4810
add a comment |
up vote
0
down vote
favorite
I created two angularjs formly custom field with custom template.
formlyConfig.setType({
name: '
wrapper-init',
template:
''
});
formlyConfig.setType({
name: 'wrapper-end',
template: '</div>'
});
What I want is use them for Wrap other Angularjs formly field between this two custom fields so We can group and separate groups of fields visually by wrapping them in layers that will be given appearance with css.
But Angularjs formly render all custom field with extra div and even close my no closed tag in my custom template fields.
This is what a need to render formly:
<div class="tag-wrapper-init">
...... some AngularJs formly fields like inputs and textareas ....
</div>
How can I create custom fields in AngularJs formly so I avoid Formly Wrap them with a
<div formly-field="" ...
Is this possible?
I have tried to make clear the idea of what I need but if I have not done well or it is not understood, comment on it to improve it but please need help on this.
angularjs angular-formly
asked Nov 9 at 4:27
Falinsito
4810
Have you tried looking intofieldGroupsin conjunction withwrapperproperties that you can set up for fields? docs.angular-formly.com/docs/field-groups
– miqh
Nov 9 at 7:52
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I created two angularjs formly custom field with custom template.
formlyConfig.setType({
name: '
wrapper-init',
template:
''
});
formlyConfig.setType({
name: 'wrapper-end',
template: '</div>'
});
What I want is use them for Wrap other Angularjs formly field between this two custom fields so We can group and separate groups of fields visually by wrapping them in layers that will be given appearance with css.
But Angularjs formly render all custom field with extra div and even close my no closed tag in my custom template fields.
This is what a need to render formly:
<div class="tag-wrapper-init">
...... some AngularJs formly fields like inputs and textareas ....
</div>
How can I create custom fields in AngularJs formly so I avoid Formly Wrap them with a
<div formly-field="" ...
Is this possible?
I have tried to make clear the idea of what I need but if I have not done well or it is not understood, comment on it to improve it but please need help on this.
angularjs angular-formly
asked Nov 9 at 4:27
Falinsito
4810
I created two angularjs formly custom field with custom template.
formlyConfig.setType({
name: '
wrapper-init',
template:
''
});
formlyConfig.setType({
name: 'wrapper-end',
template: '</div>'
});
What I want is use them for Wrap other Angularjs formly field between this two custom fields so We can group and separate groups of fields visually by wrapping them in layers that will be given appearance with css.
But Angularjs formly render all custom field with extra div and even close my no closed tag in my custom template fields.
This is what a need to render formly:
<div class="tag-wrapper-init">
...... some AngularJs formly fields like inputs and textareas ....
</div>
How can I create custom fields in AngularJs formly so I avoid Formly Wrap them with a
<div formly-field="" ...
Is this possible?
I have tried to make clear the idea of what I need but if I have not done well or it is not understood, comment on it to improve it but please need help on this.
angularjs angular-formly
angularjs angular-formly
asked Nov 9 at 4:27
Falinsito
4810
asked Nov 9 at 4:27
Falinsito
4810
asked Nov 9 at 4:27
Falinsito
4810
asked Nov 9 at 4:27
Falinsito
4810
asked Nov 9 at 4:27
Falinsito
4810
4810
Have you tried looking intofieldGroupsin conjunction withwrapperproperties that you can set up for fields? docs.angular-formly.com/docs/field-groups
– miqh
Nov 9 at 7:52
add a comment |
Have you tried looking intofieldGroupsin conjunction withwrapperproperties that you can set up for fields? docs.angular-formly.com/docs/field-groups
– miqh
Nov 9 at 7:52
Have you tried looking into
fieldGroups in conjunction with wrapper properties that you can set up for fields? docs.angular-formly.com/docs/field-groups– miqh
Nov 9 at 7:52
Have you tried looking into
fieldGroups in conjunction with wrapper properties that you can set up for fields? docs.angular-formly.com/docs/field-groups– miqh
Nov 9 at 7:52
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Hi bellow is the example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html>answered Nov 9 at 7:13
LDS
1906
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Hi bellow is the example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html>answered Nov 9 at 7:13
LDS
1906
add a comment |
up vote
0
down vote
Hi bellow is the example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html>answered Nov 9 at 7:13
LDS
1906
add a comment |
up vote
0
down vote
up vote
0
down vote
Hi bellow is the example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html>answered Nov 9 at 7:13
LDS
1906
Hi bellow is the example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<!-- bring in angular-xeditable -->
<link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
<script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
This example shows how you integrate angular-formly with <a href="https://vitalets.github.io/angular-xeditable">angular-xeditable</a>.
angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
</div>
<hr />
<form novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="vm.form.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="vm.form.$waiting" ng-click="vm.form.$cancel()">
Cancel
</button>
</span>
</formly-form>
</form>
<hr />
<h2>Model Value</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script>
(function () {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']);
app.run(function (editableOptions, formlyConfig) {
editableOptions.theme = 'bs3';
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds'
};
vm.exampleTitle = 'angular-xeditable integration'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = { text: 'This is editable!' };
vm.options = {};
vm.fields = [
{
key: 'text',
type: 'editableInput',
templateOptions: {
label: 'Text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
debugger;
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
</body>
</html>answered Nov 9 at 7:13
LDS
1906
answered Nov 9 at 7:13
LDS
1906
answered Nov 9 at 7:13
LDS
1906
answered Nov 9 at 7:13
LDS
1906
1906
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219878%2fadd-custom-fields-but-avoid-angularjs-formly-wrapper-when-render-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried looking into
fieldGroupsin conjunction withwrapperproperties that you can set up for fields? docs.angular-formly.com/docs/field-groups– miqh
Nov 9 at 7:52