Angular模式表单

Angular Schema Forms

本文关键字：表单 模式 Angular      更新时间：2023-09-26

我对Angular Schema表单完全陌生，我试图用它创建一些表单来显示在我的html页面上。我想知道如何以及在哪里放置form content和schema content定义在这一页。在什么样的文件中放置这些代码行，以及如何调用要在html页面中显示的表单?

[
  "name",
  "email",
  {
    "key": "comment",
    "type": "textarea",
    "placeholder": "Make a comment"
  },
  {
    "type": "submit",
    "style": "btn-info",
    "title": "OK"
  }
]
<<p> 模式/strong> 
{
  "type": "object",
  "title": "Comment",
  "properties": {
    "name": {
      "title": "Name",
      "type": "string"
    },
    "email": {
      "title": "Email",
      "type": "string",
      "pattern": "^''S+@''S+$",
      "description": "Email will be used for evil."
    },
    "comment": {
      "title": "Comment",
      "type": "string",
      "maxLength": 20,
      "validationMessage": "Don't be greedy!"
    }
  },
  "required": [
    "name",
    "email",
    "comment"
  ]
}

在这方面提供一些详细的初学者支持指南将不胜感激。

一种方法是在您选择的控制器中提供模式和实例数据。

文档wiki提供了一个基本示例，您应该从中获得所有必要的信息。

控制器:

angular.module('myModule', ['schemaForm'])
       .controller('FormController', function($scope) {
  $scope.schema = {
    type: "object",
    properties: {
      name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
      title: {
        type: "string",
        enum: ['dr','jr','sir','mrs','mr','NaN','dj']
      }
    }
  };
  $scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];
  $scope.model = {};
}

模板:

<div ng-controller="FormController">
    <form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>

相关文章：