angular form builder

其他类别 • 2025-08-19

角形构建器

麻省理工学院许可证

这是用CoffeeScript编写的Angularjs形式的建造者。

框架

  1. Angularjs 1.2.32
  2. jQuery 3.3.1
  3. Bootstrap 3
  4. 角刺激器

$建造者

 # just $builder
angular . module ' yourApp ' , [ ' builder ' ]

# include $builder and default components
angular . module ' yourApp ' , [ ' builder ' , ' builder.components ' ]

成分

 ###
All components.
###
$builder . components =
    componentName{string} : component{object}

组

 ###
All groups of components.
###
$builder . groups = [componentGroup{string}]

寄存器组件

">
 # .config
$builderProvider . registerComponent = ( name , component = {}) ->
    ###
    Register the component for form-builder.
    @param name: The component name.
    @param component: The component object.
        group: {string} The component group.
        label: {string} The label of the input.
        description: {string} The description of the input.
        placeholder: {string} The placeholder of the input.
        editable: {bool} Is the form object editable?
        required: {bool} Is the form object required?
        validation: {string} angular-validator. "/regex/" or "[rule1, rule2]". (default is '/.*/')
        validationOptions: {array} [{rule: angular-validator, label: 'option label'}] the options for the validation. (default is [])
        options: {array} The input options.
        arrayToText: {bool} checkbox could use this to convert input (default is no)
        template: {string} html template
        templateUrl: {string} The url of the template.
        popoverTemplate: {string} html template
        popoverTemplateUrl: {string} The url of the popover template.
    ###
# .run
$builder . registerComponent = ( name , component = {}) ->

组件.template

{{description}}

">
 < div class =" form-group " >
    < label for =" {{name+index}} " class =" col-md-4 control-label " ng-class =" {'fb-required':required} " > {{label}}  label >
    < div class =" col-md-8 " >
        < input type =" text " ng-model =" inputText " validator-required =" {{required}} " id =" {{name+index}} " class =" form-control " placeholder =" {{placeholder}} " />
        < p class =' help-block ' > {{description}}  p >
     div >
 div >

component.popovertemplate

">
 < form >
    < div class =" form-group " >
        < label class =' control-label ' > Label  label >
        < input type =' text ' ng-model =" label " validator =" [required] " class =' form-control ' />
     div >
    < div class =" form-group " >
        < label class =' control-label ' > Description  label >
        < input type =' text ' ng-model =" description " class =' form-control ' />
     div >
    < div class =" form-group " >
        < label class =' control-label ' > Placeholder  label >
        < input type =' text ' ng-model =" placeholder " class =' form-control ' />
     div >
    < div class =" checkbox " >
        < label >
            < input type =' checkbox ' ng-model =" required " />
            Required  label >
     div >
    < div class =" form-group " ng-if =" validationOptions.length > 0 " >
        < label class =' control-label ' > Validation  label >
        < select ng-model =" $parent.validation " class =' form-control ' ng-options =" option.rule as option.label for option in validationOptions " >  select >
     div >
    < hr />
    < div class =' form-group ' >
        < input type =' submit ' ng-click =" popover.save($event) " class =' btn btn-primary ' value =' Save ' />
        < input type =' button ' ng-click =" popover.cancel($event) " class =' btn btn-default ' value =' Cancel ' />
        < input type =' button ' ng-click =" popover.remove($event) " class =' btn btn-danger ' value =' Delete ' />
     div >
 form >

表格

 ###
builder mode: `fb-builder` you could drag and drop to build the form.
form mode: `fb-form` this is the form for end-user to input value.
Default is {default: []}
###
$builder . forms =
    formName{string} : formObjects{array}

插入OmpObject 

 $builder . insertFormObject = ( name , index , formObject = {}) =>
    ###
    Insert the form object into the form at {index}.
    @param name: The form name.
    @param index: The form object index.
    @param form: The form object.
        id: The form object id.
        component: {string} The component name
        editable: {bool} Is the form object editable? (default is yes)
        label: {string} The form object label.
        description: {string} The form object description.
        placeholder: {string} The form object placeholder.
        options: {array} The form object options.
        required: {bool} Is the form object required? (default is no)
        validation: {string} angular-validator. "/regex/" or "[rule1, rule2]".
        [index]: {int} The form object index. It will be generated by $builder.
    @return: The form object.
    ###

addformobject 

 $builder . addFormObject = ( name , formObject = {}) =>
    ###
    Insert the form object into the form at last.
    reference $builder.insertFormObject()
    ###

删除OmperObobject 

 $builder . removeFormObject = ( name , index ) =>
    ###
    Remove the form object by the index.
    @param name: {string} The form name.
    @param index: {int} The form object index.
    ###

构建器

FB组件

  • {{group}}
    • """ controller: 'fbComponentsController' a.directive 'fbComponents', fbComponents">
     a = angular . module ' builder.directive ' , [ ' builder.provider ' , ' builder.controller ' , ' builder.drag ' , ' validator ' ]
fbComponents = ->
    ###
    You could use `fb-components` to render the components view.
    ###
    restrict : ' A '
    template :
        """
        
        
    
            
    
                fb-component="component">
    
        
    
        """
    controller : ' fbComponentsController '
a . directive ' fbComponents ' , fbComponents
     < div fb-components >  div >

    FB构建器

    """ link: (scope, element, attrs) -> fbBuilder.$inject = ['$injector'] a.directive 'fbBuilder', fbBuilder">
     a = angular . module ' builder.directive ' , [ ' builder.provider ' , ' builder.controller ' , ' builder.drag ' , ' validator ' ]
fbBuilder = ( $injector ) ->
    ###
    You could use `fb-builder="formName"` to render the builder view.
    ###
    restrict : ' A '
    template :
        """
        
    
            
    
                fb-form-object-editable="object">
    
        
    
        """
    link : ( scope , element , attrs ) ->
fbBuilder . $inject = [ ' $injector ' ]
a . directive ' fbBuilder ' , fbBuilder
    ">
     < div fb-builder =" default " >  div >

    FB形式

    """ controller: 'fbFormController' link: (scope, element, attrs) -> fbForm.$inject = ['$injector'] a.directive 'fbForm', fbForm">
     a = angular . module ' builder.directive ' , [ ' builder.provider ' , ' builder.controller ' , ' builder.drag ' , ' validator ' ]
fbForm = ( $injector ) ->
    ###
    You could use `fb-form="formName"` to render the form view for end-users.
    ###
    restrict : ' A '
    require : ' ngModel '  # form data (end-user input value)
    scope :
        # input model for scops in ng-repeat
        input : ' =ngModel '
    template :
        """
        
    
        
    
        """
    controller : ' fbFormController '
    link : ( scope , element , attrs ) ->
fbForm . $inject = [ ' $injector ' ]
a . directive ' fbForm ' , fbForm
    ">
     < form class =" form-horizontal " >
    < div ng-model =" input " fb-form =" default " fb-default =" defaultValue " >  div >
    < div class =" form-group " >
        < div class =" col-md-8 col-md-offset-4 " >
            < input type =" submit " ng-click =" submit() " class =" btn btn-default " />
         div >
     div >
 form >

    builder.com

    此模块上有一些默认组件。不需要此模块。

    单位测试

    $ npm test

    发展

     # install node modules
$ npm install
# install bower components
$ bower install
     # run the local server and the file watcher to compile CoffeeScript
$ grunt dev
# compile coffee script and minify
$ grunt build
    下载源码

    通过命令行克隆项目:

    git clone https://github.com/kelp404/angular-form-builder.git

    相关文章

    eslint plugin angular

    2025-08-19

    invenio

    2025-08-19

    ionic datepicker

    2025-08-19

    guides

    2025-08-19

    推荐阅读

    向上：银河游戏免安装正式版

    2026-01-23

    风暴驭使正式中文版

    2026-01-23

    冥河：贪婪之刃中文试玩版

    2026-01-23

    超级键盘侠免安装绿色中文版

    2026-01-23