Добавляйте настраиваемые поля, но избегайте упаковщика angularjs при отображении формы - PullRequest
Новая
       18

Добавляйте настраиваемые поля, но избегайте упаковщика angularjs при отображении формы

0 голосов
/ 09 ноября 2018

Я создал два настраиваемых настраиваемых поля 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 формально, чтобы я избегал Formly Оберните их 

<div formly-field="" ...

Возможно ли это?

Я попытался прояснить идею о том, что мне нужноно если я не справился хорошо или его не поняли, прокомментируйте его, чтобы улучшить, но, пожалуйста, нужна помощь по этому вопросу.

1 Ответ

0 голосов
/ 09 ноября 2018

Привет ниже приведен пример 

<!DOCTYPE html>



    
        body {
            margin: 20px
        }

        .formly-field {
            margin-bottom: 16px;
        }
    
    <!-- Twitter bootstrap -->
    

    <!-- apiCheck is used by formly to validate its api -->
    
    <!-- This is the latest version of angular (at the time this template was created) -->
    

    <!-- This is the latest version of formly core. -->
    
    <!-- This is the latest version of formly bootstrap templates -->
    

    <!-- bring in angular-xeditable -->
    
    

    Angular Formly Example



    
        angular-formly example: {{vm.exampleTitle}}
        
            This example shows how you integrate angular-formly with angular-xeditable.
            angular-xeditable does some interesting things with the forms, so there's a little bit of extra work you need to do.
        
        
        
            
                <!-- button to show form -->
                
                <!-- buttons to submit / cancel form -->
                
                    
                    
                
            
        
        
        Model Value
        {{vm.model | json}}

Поля (примечание, функции не отображаются) 

{{vm.originalFields | json}}
Это пример проекта angular-formly , созданного с помощью ♥ by {{vm.author.name ||'anonymous'}} {{vm.author.name}} В этом примере выполняется угловая версия "{{vm.env.angularVersion}}" и формальная версия "{{vm.env.formlyVersion}}" (function () {'использовать строгий'; var app = angular.module ('formlyExample', ['formly', 'formlyBootstrap', 'xeditable']); app.run (функция (editableOptions, formlyConfig) {editableOptions.theme = 'bs3'; formlyConfig.setType ({extends: 'input', template: '
{{model [options.key] || "empty"}}
', name:'editableInput'});}); app.controller ('MainCtrl', функция MainCtrl (formlyVersion) {var vm = this; // назначение функции vm.onSubmit = onSubmit; // назначение переменной vm.author = {// опциональновведите информацию ниже :-) name: 'Kent C. Dodds', url: 'https://twitter.com/kentcdodds'}; vm.exampleTitle =' angular-xeditable интеграции '; // добавьте это vm.env = {angularVersion: angular.version.full, formlyVersion: formlyVersion}; vm.model = {text: 'Это редактируемое!'}; vm.options = {}; vm.fields = [{key: 'text', тип: 'editableInput', templateOptions:{label: 'Text'}}]; vm.originalFields = angular.copy (vm.fields); // функция определения функции onSubmit () {debugger; vm.options.updateInitialValue ();alert (JSON.stringify (vm.model), null, 2);}});}) ();
...