oneOf-2.ts

@Component({
  template: `
    <form #f="ngForm">
      <ng-container ngModelGroup="assignee">
        <div>
          <input
            type="radio"
            name="$case"
            [ngModel]="assigneeCase"
            value="userId"
          />
          User
          <input
            type="radio"
            name="$case"
            [ngModel]="assigneeCase"
            value="userGroupId"
          />
          User Group
        </div>

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

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

      <button>Submit</button>
    </form>
  `,
})
export class TaskFormComponent {
  form: Task = {
    name: '',
    assignee: {
      $case: 'userId',
      userId: '',
    },
  };

  get assigneeCase() {
    return this.form.assignee.$case;
  }
}