項目數組的Angular6 JSON模式表單

Question

我正在為我的應用程序嘗試Angular6 JSON形式，並陷入了具有數組模式的問題

基本布局看起來像

{
  "schema": {
        "type": "array",
        "properties": {
            "type": { "type": "string" },
            "number": { "type": "string" },
        }
  },
  "layout": [
    { 
      "type": "array",
      "items": [ {
        "type": "div",
        "displayFlex": true,
        "flex-direction": "row",
        "items": [
          { "key": "type", "flex": "1 1 50px",
            "notitle": true, "placeholder": "Type"
          },
          { "key": "number", "flex": "4 4 200px",
            "notitle": true, "placeholder": "Phone Number"
          }
        ]
      } ]
    }
  ],
  "data": [
      { "type": "cell", "number": "702-123-4567" },
      { "type": "work", "number": "702-987-6543" }
    ]
}

但是我沒有得到預期的結果，那就是Form已預先填充了數據

[
          { "type": "cell", "number": "702-123-4567" },
          { "type": "work", "number": "702-987-6543" }
        ]

請參閱： https : //hamidihamza.com/Angular6-json-schema-form/

Answer 1

根據您的代碼，您可能需要重新訪問某些部分。

• 根據文檔http://json-schema.org/latest/json-schema-core.html ，架構類型應為對象或布爾值
• 在模式部分中，您似乎希望類型和數字成為JSON實例的屬性。 有了這個，您只能將一個數據實例傳遞給框架以填寫您的屬性，因為框架無法決定要為字符串類型的屬性使用哪個值。
• 如果要查找具有類型和數字的數組，則可以使用類型數組來具有“電話號碼”之類的屬性。 以下是angular6-json-schema flex布局示例的示例，我認為您已將其作為參考。

"schema": {
 ...
   "phone_numbers": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "type": { "type": "string", "enum": [ "cell", "home", "work" ] },
          "number": { "type": "string" }
        },
        "required": [ "type", "number" ]
}

並傳遞具有以下內容的數據：

"data": {
...
"phone_numbers": [
      { "type": "cell", "number": "702-123-4567" },
      { "type": "work", "number": "702-987-6543" }
    ],
}