使用反应驱动形式的错误验证 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。