javascript - 向 Angular Schema 表单的输入字段添加 ID？

Question

我正在使用 Angular Schema Form 为我生成输入字段。我想知道是否有任何方法可以通过添加 ID 来自定义输入字段。我尝试查看文档（https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md），但当前版本似乎不支持它（仅添加类）。

Answer 1

我刚刚做了一些研究，并在“厨房水槽”示例上 -

http://schemaform.io/examples/bootstrap-example.html

他们使用了这个代码

形式：

`[
  {
    "type": "fieldset",
    "title": "Stuff",
    "items": [
      {
        "type": "tabs",
        "tabs": [
          {
            "title": "Simple stuff",
            "items": [
              {
                "key": "name",
                "placeholder": "Check the console",
                "onChange": "log(modelValue)",
                "feedback": "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
              },
              {
                "key": "favorite",
                "feedback": false
              }
            ]
          },
          {
            "title": "More stuff",
            "items": [
              "attributes.eyecolor",
              "attributes.haircolor",
              {
                "key": "attributes.shoulders.left",
                "title": "Left shoulder",
                "description": "This value is copied to attributes.shoulders.right in the model",
                "copyValueTo": [
                  "attributes.shoulders.right"
                ]
              },
              {
                "key": "shoesizeLeft",
                "feedback": false,
                "copyValueTo": [
                  "shoesizeRight"
                ]
              },
              {
                "key": "shoesizeRight"
              },
              {
                "key": "invitation",
                "tinymceOptions": {
                  "toolbar": [
                    "undo redo| styleselect | bold italic | link image",
                    "alignleft aligncenter alignright"
                  ]
                }
              },
              "things",
              "dislike"
            ]
          }
        ]
      }
    ]
  },
  {
    "type": "help",
    "helpvalue": "<hr>"
  },
  "soul",
  {
    "type": "conditional",
    "condition": "modelData.soul",
    "items": [
      {
        "key": "soulserial",
        "placeholder": "ex. 666"
      }
    ]
  },
  {
    "key": "date",
    "minDate": "2014-06-20"
  },
  {
    "key": "radio",
    "type": "radios",
    "titleMap": [
      {
        "value": "Transistor",
        "name": "Transistor <br> Not the tube kind."
      },
      {
        "value": "Tube",
        "name": "Tube <br> The tube kind."
      }
    ]
  },
  {
    "key": "radio2",
    "type": "radios-inline",
    "titleMap": [
      {
        "value": "Transistor",
        "name": "Transistor <br> Not the tube kind."
      },
      {
        "value": "Tube",
        "name": "Tube <br> The tube kind."
      }
    ]
  },
  {
    "key": "radiobuttons",
    "style": {
      "selected": "btn-success",
      "unselected": "btn-default"
    },
    "type": "radiobuttons",
    "notitle": true
  },
  {
    "type": "actions",
    "items": [
      {
        "type": "submit",
        "style": "btn-info",
        "title": "Do It!"
      },
      {
        "type": "button",
        "style": "btn-danger",
        "title": "Noooooooooooo",
        "onClick": "sayNo()"
      }
    ]
  }
]`

架构：

`{
  "type": "object",
  "required": [
    "name",
    "shoesizeLeft"
  ],
  "properties": {
    "name": {
      "title": "Name",
      "description": "Gimme yea name lad",
      "type": "string",
      "pattern": "^[^/]*$",
      "minLength": 2
    },
    "invitation": {
      "type": "string",
      "format": "html",
      "title": "Invitation Design",
      "description": "Design the invitation in full technicolor HTML"
    },
    "favorite": {
      "title": "Favorite",
      "type": "string",
      "enum": [
        "undefined",
        "null",
        "NaN"
      ]
    },
    "shoesizeLeft": {
      "title": "Shoe size (left)",
      "default": 42,
      "type": "number"
    },
    "shoesizeRight": {
      "title": "Shoe size (right)",
      "default": 42,
      "type": "number"
    },
    "attributes": {
      "type": "object",
      "title": "Attributes",
      "required": [
        "eyecolor"
      ],
      "properties": {
        "eyecolor": {
          "type": "string",
          "format": "color",
          "title": "Eye color",
          "default": "pink"
        },
        "haircolor": {
          "type": "string",
          "title": "Hair color"
        },
        "shoulders": {
          "type": "object",
          "title": "Shoulders",
          "properties": {
            "left": {
              "type": "string",
              "title": "Left"
            },
            "right": {
              "type": "string",
              "title": "Right"
            }
          }
        }
      }
    },
    "things": {
      "type": "array",
      "title": "I like...",
      "items": {
        "type": "string",
        "enum": [
          "clowns",
          "compiling",
          "sleeping"
        ]
      }
    },
    "dislike": {
      "type": "array",
      "title": "I dislike...",
      "items": {
        "type": "string",
        "title": "I hate"
      }
    },
    "soul": {
      "title": "Terms Of Service",
      "description": "I agree to sell my undying <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>soul</a>",
      "type": "boolean",
      "default": true
    },
    "soulserial": {
      "title": "Soul Serial No",
      "type": "string"
    },
    "date": {
      "title": "Date of party",
      "type": "string",
      "format": "date"
    },
    "radio": {
      "title": "Radio type",
      "type": "string",
      "enum": [
        "Transistor",
        "Tube"
      ]
    },
    "radio2": {
      "title": "My Second Radio",
      "type": "string",
      "enum": [
        "Transistor",
        "Tube"
      ]
    },
    "radiobuttons": {
      "type": "string",
      "enum": [
        "Select me!",
        "No me!"
      ]
    }
  }
}`

乍一看，它似乎在第一个输入字段上生成了一个 ID。所以我认为它与Key表单title中的和模式中的有关。

Answer 2

ID 字段是从旧 0.x 版本中的键的最后一段生成的，以及 1.0.0 及更高版本的下一个版本代码中的组合表单名称和对象路径。

因此，从 1.0.0 开始，您将拥有适当的唯一 ID，例如：

formName--objectName-arrayName-4-property

虽然类匹配也将与没有数组位置的版本一起提供：formName--objectName-arrayName-property

唯一 id 和灵活类的组合应该可以满足任何定制需求。