Question

我正在为我的应用程序尝试Angular6 JSON表单，并陷入了具有数组模式的问题

基本布局看起来像

process.env.NODE_ENV === 'test';

import chai from 'chai';
import chaiHttp from 'chai-http';
import app from '../../app';
import faker from 'faker';
import moment from 'moment';

const { expect } = chai;
// using chai-http middleware
chai.use(chaiHttp);

describe('POST USER', () => {
    it('Should successfully create a user account if inputs are valid', (done) => {
        chai.request(app)
            .post('/api/v1/user/signup')
            .type('json')
            .send({
                userImage: faker.image.people(),
                firstName: 'Kazeem',
                lastName: 'Odutola',
                otherName: 'Oluwatobi',
                email: 'tester@gmail.com',
                password: 'Kazeem27',
                userName: 'Kaz',
                phoneNumber: '080874568356',
                isAdmin: 'yes',
                createdOn: moment(new Date())
            })
            .then((res) => {
                // eslint-disable-next-line no-console
                console.log(res.body.data);
                const { body } = res;
                expect(body).to.be.an('object');
                expect(body.status).to.be.equals(201);
                expect(body.data).to.be.an('object');
                expect(body.data.token).to.be.a('string');
                done();
            })
            .catch((error) => done(error));
    });
});

但是我没有得到预期的结果，那就是Form已预先填充了数据

{
  "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" }
    ]
}

引用：https://hamidihamza.com/Angular6-json-schema-form/

Answer 1

根据您的代码，您可能需要重新访问某些部分。

根据文档http://json-schema.org/latest/json-schema-core.html
在schema部分中，似乎您希望类型和数字成为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" }
    ],
}

项目数组的Angular6 JSON模式表单

1 个答案: