angular - 使用反应驱动形式的错误验证 Angular 11

Question

也许有经验的全栈开发人员可以帮助解决这个问题——（不是问题，更多的研究和开发）我有一个任务，我必须在我们的新 angular 11 平台上编写验证，他们希望它是反应驱动的验证，这很好，我的主要问题是，假设我们的数据库中有一个 XML 文件，并且该 xml 包含所有业务规则验证，我如何将数据库中的 XML 调用到我的角度组件中以匹配这些值，如果它确实如此匹配验证它应该输出一个错误。我理解模板驱动但反应驱动，同时调用一个 xml 文件试图匹配这些值，这就是我卡住的地方。我唯一的猜测是编写一个调用该 xml 将其转换为 JSON 的服务OBJ 等。任何输入将不胜感激。

Answer 1

是的，你最好的选择是将你的 xml 转换为 json，然后你可以reactive forms动态地创建你的。我做过类似的事情，比如我有 json，它具有所有表单创建规则（validaitons、feidl 名称等）

let formFields = [
        {
    name: 'pickupLocations',
    isRequired: true,
    isArray: true,
    nestedFieldsArr: [
      {
        name: 'location',
        isRequired: true
      },
      {
        name: 'lat',
        isRequired: false
      },
      {
        name: 'long',
        isRequired: false
      },
      {
        name: 'locationCode',
        isRequired: false
      },
      {
        name: 'dateTime',
        isRequired: true
      }
    ]
  },
  {
    name: 'deliveryLocations',
    isRequired: true,
    isArray: true,
    nestedFieldsArr: [
      {
        name: 'location',
        isRequired: true
      },
      {
        name: 'lat',
        isRequired: false
      },
      {
        name: 'long',
        isRequired: false
      },
      {
        name: 'locationCode',
        isRequired: false
      },
      {
        name: 'dateTime',
        isRequired: true
      }
    ]
  },
  {
    name: 'bidVehicles',
    isRequired: true,
    isArray: true,
    nestedFieldsArr: [
      {
        name: 'vehicleLoadId',
        isRequired: true
      },
      {
        name: 'numberOfVehicles',
        isRequired: true
      },
      {
        name: 'loadRequirementId',
        isRequired: false,
        defaultValue: 1
      }
    ]
  },
  {
    name: 'shipmentWeight',
    isRequired: true
  },
  {
    name: 'budgetMin',
    isRequired: true
  },
]

现在我有了像这样动态创建表单的功能

createForm(fieldsArr: any[]) {
    let formObject = {};
    fieldsArr.forEach(f => {
    formObject[f.name] = f.isArray ? this.fb.array([this.createArrayType(f.nestedFieldsArr)]) : [f.defaultValue ? f.defaultValue : '', f.isRequired ? Validators.required : Validators.nullValidator]
   })
    return this.fb.group(formObject);
}

createArrayType(nestedFieldsArr: any[]) {
  let nestedFormObj = {};
  nestedFieldsArr.forEach(f => {
  nestedFormObj[f.name] = [f.defaultValue ? f.defaultValue : '', f.isRequired ? Validators.required : Validators.nullValidator]
})
  let form = this.fb.group(nestedFormObj);
  return form;
}

所以通过这种方式，我有一个json包含所有validation规则、字段名称和nested array fields.