Question

我用自定义模板创建了两个angularjs正式的自定义字段。

formlyConfig.setType({
    name: '

wrapper-init',
        template:

'' }）;

formlyConfig.setType({
    name: 'wrapper-end',
    template: '</div>'
});

我想要的是将它们用于在这两个自定义字段之间包装其他Angularjs正式字段，因此我们可以通过将它们包装在将使用css外观的层中来可视地对字段进行分组和分离。

但是Angularjs会以额外的div形式呈现所有自定义字段，甚至关闭我的自定义模板字段中没有关闭的标签。

这是需要正式呈现的内容：

<div class="tag-wrapper-init">

...... some AngularJs formly fields like inputs and textareas ....

</div>

如何正式在AngularJs中创建自定义字段，所以避免用

对其进行正式包装

<div formly-field="" ...

这可能吗？

我试图弄清楚我需要什么，但是如果我做得不好或不被理解，请对其进行评论以改善它，但是在这方面需要帮助。

Answer 1

下面是您的例子

<!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>

添加自定义字段，但在呈现表单时避免angularjs形式化包装

1 个答案: