如何布置依赖于主字段的子字段？

Question

我有一个线框需要用 ngx-formly 实现，与此类似，使用 Angular Material:

我已经弄清楚如何适当地启用和禁用，但我不确定如何让字段 2 位于字段 1 选项 A 的下方。这可能吗？如果可以，最好的方法是什么？我是 Formly 的新手，所以非常感谢任何帮助。

Answer 1

非常感谢 Github 上的 aitboudad 提供答案：https://github.com/formly-js/ngx-formly/issues/1122

他的 StackBlitz：https://stackblitz.com/edit/angular-hf3y6f

基本上，解决方案是为字段 1 的每个选项创建单独的字段定义，但给它们相同的键和名称。然后它们将绑定到模型中的同一事物。我为每个选择使用 templateOptions.options 数组定义了单选按钮字段，而不是想这样做。来自上面引用的 StackBlitz：

{
  key: 'Field1',
  type: 'radio',
  name: 'Field1',
  templateOptions: {options: [{ value: 1, label: 'Field 1 (option1)' }]},
},
{
  key: 'Field2',
  type: 'input',
  className: 'ml-5 d-block',
  templateOptions: { label: 'Field 2' },
  expressionProperties: {
    'templateOptions.disabled': 'model.Field1 !== 1',
  },
},
{
  key: 'Field1',
  type: 'radio',
  name: 'Field1',
  templateOptions: {options: [{ value: 2, label: 'Field 1 (option2)' }]},
},
....

如何布置依赖于主字段的子字段？

How can I lay out sub-fields that depend on a main field?

angular-formly