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

Question

我有一个线框，需要使用ngx形式使用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)' }]},
},
....