oneOf-3.ts

@Component({
  template: `
    <form [formGroup]="form">
      <ng-container formGroupName="assignee">
        <div>
          <input
            type="radio"
            name="$case"
            formControlName="$case"
            value="userId"
          />
          User
          <input
            type="radio"
            name="$case"
            formControlName="$case"
            value="userGroupId"
          />
          User Group
        </div>

        <ng-container [ngSwitch]="assignee.value.$case">
          <ng-container *ngSwitchCase="'userId'">
            <select name="userId" formControlName="userId">
              <option ngValue="userA">User A</option>
              <option ngValue="userB">User B</option>
            </select>
          </ng-container>

          <ng-container *ngSwitchCase="'userGroupId'">
            <select name="userGroupId" formControlName="userGroupId">
              <option ngValue="groupA">Group A</option>
              <option ngValue="groupB">Group B</option>
            </select>
          </ng-container>
        </ng-container>
      </ng-container>

      <button>Submit</button>
    </form>
  `,
})
export class TaskFormComponent {
  private fb = inject(FormBuilder);

  form = this.fb.nonNullable.group({
    name: '',
    assignee: this.fb.nonNullable.group({
      $case: 'userId',
    }),
  });

  get assignee() {
    return this.form.get('assignee') as FormGroup;
  }

  ngOnInit() {
    const $case = this.assignee?.get('$case');

    $case?.valueChanges.pipe(startWith($case.value)).subscribe(($case) => {
      clearOneOf(this.assignee);

      this.assignee.addControl(
        $case,
        this.fb.control('', Validators.required)
      );
    });
  }
}

function clearOneOf(group: FormGroup) {
  Object.keys(group.controls).forEach((key) => {
    if (key !== '$case') {
      group.removeControl(key);
    }
  });
}