[AngularJS] Introduction to angular-formly-优快云博客

本文介绍了一个基于Angular的表单生成库Angular Formly的基本使用方法。通过实例展示了如何定义表单字段、模板选项及如何处理表单提交等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <!-- Each of these scripts are the latest version of the library at the time this jsbin was created -->

    <!-- Twitter bootstrap -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
    <!-- api-check is a dependency of angular-formly -->
    <script src="bower_components/api-check/dist/apiCheck.min.js"></script>

    <!-- angular.js is a dependency of angular-formly (obviously) -->
    <script src="bower_components/angular/angular.min.js"></script>

    <!-- This is angular-formly -->
    <script src="bower_components/angular-formly/dist/formly.min.js"></script>

    <!-- This is a bootstrap template libraray giving us some pre-defined types for bootstrap -->
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/4.0.3/dist/angular-formly-templates-bootstrap.js"></script>

    <title>Angular Formly Lesson</title>
</head>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
    <h1>
        angular-formly: Introduction<br />
        <small>Egghead.io lesson by @kentcdodds</small>
    </h1>
    <form name="vm.form" ng-submit="vm.onSubmit()" novalidate>
        <formly-form model="vm.model" fields="vm.fields"></formly-form>
        <button type="submit" class="btn btn-primary submit-button">Submit</button>
    </form>

    <form name="vm.form" ng-submit="vm.onSubmit()" novalidate>
        <div class="form-group">
            <label for="firstName">First Name</label>
            <input ng-model="vm.model.firstName" id="firstName" name="firstName" class="form-control" />
        </div>
        <button type="submit" class="btn btn-primary submit-button">Submit</button>
    </form>
    <h2>Model</h2>
    <pre>{{vm.model | json}}</pre>
    <h2>Fields <small>(note, functions are not shown)</small></h2>
    <pre>{{vm.originalFields | json}}</pre>
    <h2>Form</h2>
    <pre>{{vm.form | json}}</pre>
</div>
<script src="app.js"></script>
</body>

</html>

/* global angular */
(function() {

    'use strict';

    var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);

    app.controller('MainCtrl', function MainCtrl() {
        var vm = this;
        // funcation assignment
        vm.onSubmit = onSubmit;

        // variable assignment
        vm.model = {
            firstName: 'Obi Wan',
            something: {name: "default",value:"default"}
        };
        vm.fields = [
            {
                type: 'input',
                key: 'firstName',
                templateOptions: {
                    label: 'First Name'
                }
            },
            {
                template: '<hr />'
            },
            {
                type: 'select',
                key: 'something',
                templateOptions: {
                    label: 'Select Somthing',
                    options: [
                        {name: "wan", value: "Wan"},
                        {name: "obi", value: "Obi"},
                        {name: "Yui", value: "yui"}
                    ]
                }
            }
        ];


        // copy fields because formly adds data to them
        // that is not necessary to show for the purposes
        // of this lesson
        vm.originalFields = angular.copy(vm.fields);

        // function definition
        function onSubmit() {
            alert(JSON.stringify(vm.model), null, 2);
        }
    });

})();