[AngularJS] angular-formly: Extending Types-优快云博客

本文提供了一个使用Angular Formly库通过自定义类型扩展来简化Angular表单管理的示例。通过创建一个名为'avengersSelect'的自定义选择类型，开发者可以轻松地复用通用组件，并添加特定功能。

Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. When use responsibly, they can make it much easier to manage common types, allowing you to add a bit of functionality to a common type.

(function() {

    'use strict';

    var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);
    
    app.run(function(formlyConfig) {
        formlyConfig.setType({
            name: 'avengersSelect',
            extends: 'select',
            defaultOptions: {
                templateOptions: {
                    label: 'Favorite Avenger',
                    options: [
                        {name: 'Iron Man', value: 'iron_man'},
                        {name: 'Captain America', value: 'captain_america'},
                        {name: 'Black Widow', value: 'black_widow'},
                        {name: 'Hulk', value: 'hulk'},
                        {name: 'Thor', value: 'thor'}
                    ]
                }
            }
        });
    })

    app.controller('MainCtrl', function MainCtrl($timeout) {
        var vm = this;
        vm.model = {};
        vm.fields = [
            {
                type: 'avengersSelect',
                key: "avengersSelect"
            },
            {
                type: 'avengersSelect',
                key: "avengersSelect2",
                templateOptions: {
                    label: 'Favorite Avenger 2',
                    options: [
                        {name: 'Iron Man', value: 'iron_man'},
                        {name: 'Captain America', value: 'captain_america'},
                        {name: 'Black Widow', value: 'black_widow'},
                        {name: 'Hulk', value: 'hulk'},
                        {name: 'Thor', value: 'thor'}
                    ]
                }
            }

        ];
    });
})();