优雅的动态角度形式使用方式

Question

场景：

1. 有一个具有最初两个字段（即<div cdkDropList class="col-md-11 px-0" (cdkDropListDropped)="drop($event)" formArrayName="musics"> <div class="example-box" *ngFor="let m of musicsForm.get('musics').controls; let i = index" cdkDrag> <div class="item row my-4 w-100" [formGroupName]="i"> <!-- Define all formControlNames within your formGroup within this div --> ... <div class="col-md-4 mt-1"> <input class="px-2 w-100" type="text" [placeholder]="m.value.name" formControlName="name"> </div> ... </div> </div> </div> 和formArray）的表单
2. 有一个名为sed -i '$ d' simple-service-test.yaml的复选框，单击后会动态向表单中添加四个字段（即Name，DateOfBirth，compare和Name2 ）。

3. 有一些奇怪的验证规则

   • 姓名和出生日期均为必填
   • 名称2或DateOfBirth2是强制性的（任何一个）
   • 姓名3或DateOfBirth3是必需的（任何一个）

屏幕看起来像这样

代码（HTML）：

DateOfBirth2

代码（TS）：

Name3

}

此代码目前可以使用，但是如果我需要添加另外两个字段，它会比现在变得混乱。有解决这个问题的优雅方法吗？