【问题标题】:What's the relation between schema and form in angular-schema-form?角度模式形式中模式和形式之间的关系是什么?
【发布时间】:2019-07-23 16:04:36
【问题描述】:

在我的 Angular 项目中,我需要动态创建一些表单。我为此做了一些谷歌搜索,发现了一个模块angular-schema-form。看来这正是我想要的,但问题是我不明白如何保持模式和形式。架构和形式是什么关系?

我从form types 阅读了文档,但这对我帮助不大。我不想像 HIT 和 TRY 那样使用这个模块。我首先要理解这个概念:schema和form是什么关系?

【问题讨论】:

  • 您的问题不清楚。您不确定 JSON-Schema(您要询问的模块的格式)是什么? json-schema.org.
  • 一些来自 angular-schema-form github 页面的代码 sn-p。 var schema = { "type": "object", "properties": { "surname": { "type": "string" }, "firstname": { "type": "string" }, } } // for form [ "firstname", "surname" ] 这里数组用于表单,对象用于模式。他们使用一些约定来呈现 html。像输入框的类型字符串或文本,如果我想用作标签怎么办,另一个选项是模板而不是文本,这里我不如何将此模板html与模型值绑定。 [1/2]
  • 您的问题已在 JSON-Schema 规范中得到解答。
  • 从问题和 cmets 看来,您在理解文档时遇到了困难。如果您能够尝试一些事情并就文档中某个让您感到困惑的特定部分提出问题,那么您将有更好的运气获得合理的答案。在这里从其他来源重写文档几乎没有帮助。

标签: angularjs angular-schema-form


【解决方案1】:

尝试解决基本问题:

模式和形式的关系是什么?

简单来说,也许这样想是最容易的。要创建表单,您需要三段 JSON:

  • 包含通过表单呈现的实际数据的 JSON。这是model

  • JSON schema。这描述了model 的结构。举一个非常简单的例子来说明modelschema 之间的关系,假设您的实际数据(您的model)根据性别和年龄来描述一个人,例如{sex: female, age: 32}schema的作用是描述模型的结构,所以在这种情况下,它会描述应该有一个字符串类型的sex属性,其值只能是malefemale,并且有一个age 属性,依此类推。为了能够呈现使用您的 model 数据填充的表单,它只需要一个 schema 来首先构造表单。

  • 我认为 JSON form可选。你必须拥有它,但它可以简单地包含"*",它告诉angular-schema-form 只是根据模式自动构建表单。在这种情况下,库将完全基于架构并使用文档中描述的默认设置来构建表单。但是,如果您愿意,您可以使用form 对象来描述您希望表单的结构。

下面是form 对象为您提供灵活性的一个非常粗略且非常简单的示例:

以上面的person 对象示例为例,如果您不使用form 对象(即它只包含"*"),那么angular-schema-form 将为您构建一个基于架构的表单。因此它将具有sexage 的输入字段。这些字段可能会或可能不会采用您想要的格式、顺序或其他属性。然后,您可以选择使用form 对象来指示angular-schema-form 您希望它如何构造表单。例如,您可以使用form 来使表单只包含age 的字段,但不包含sex

所以model 是您的数据,schema 描述了该数据的结构。简单来说,form 为您的表单提供了进一步的映射和配置层,覆盖了仅基于schema 创建的默认表单。

这有帮助吗?

【讨论】:

  • 是的,这对我很有帮助,因为您已经消除了我对表单只是一个可选层的怀疑。我的猜测是一样的,但不确定我的猜测。我进行了同样的探索,发现模式对象中的属性是表单数组中的键,而表单数组只是用于覆盖默认类型。今天一整天我都在谷歌上搜索并找到了我想要的解决方案。代码 sn-p [1/2]
  • [2/2]
    ` $scope.schema = { 类型: “对象”,属性:{名称:{类型:“字符串”}}}; $scope.form = [ { type: "template", template: '

    哟 {{model.name}}!

    ', foo: function() { console.log('哦,不!'); } }, { 类型:“文本”,键:“名称” } ]; $scope.model = {name:"这是为了测试"}; ' 我们也可以将模板与模型绑定,这就是我想要的。
【解决方案2】:

我也有你同样的问题,而且和你一样,没有人能够简单地理解我的担忧。 我不是 AngualrJS 专家,也不是 JSON 专家,所以我在理解手册时遇到了很多困难,而且我发现这些示例也令人困惑(对于像我这样的菜鸟)。

所以经过多次尝试和错误,这就是我的理解:

form<FORM> 在渲染时的结构。

schema 是这个链接严格定义的数据结构: https://json-schema.org/understanding-json-schema/about.html

它与旧的 XML 模式 dtd 有很多相似之处。 当您定义模式时,它将定义数据在模型上的呈现方式。 因此,如果您像这样定义架构

{
        "type" : "object",
        "properties" : {
            "contact" : {
                "title" : "$Contact",
                "type" : "number"
            }
        }
    }

模型会将联系人呈现为数值。如果您将类型设置为字符串,您将以字符串格式呈现模型,依此类推。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-17
    • 1970-01-01
    • 1970-01-01
    • 2021-11-25
    相关资源
    最近更新 更多