我试图摆脱这个错误的消息，并试图让我的代码工作。我的意图是创建一个由firstName lastName businessName组成的角形表单验证。如果firstName和lastName已填写，则不再需要businessName，反之亦然。如果选择了'business'段，在提交时，我们需要清除firstName和lastName。如果'personal' is selected '，onSubmit清除' businessName '。我的app.component.html在StackBlitz环境中给出了这个错误。

Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<any>'.
Type 'Event' is missing the following properties from type 'CustomEvent<any>': detail, initCustomEvent

字符串
我的部分不是形式，但它在工具栏离子段。下面是一个片段和我的代码。我是不是有什么结构上的问题？我不知道，也许是太简单了。请帮帮我。
编辑：如果合适的话，让我也提供我的开发环境stackblitz

//app.component.ts file
import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  AbstractControl,
  ValidationErrors,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./global_styles.css'],
})
export class AppComponent implements OnInit {
  form!: FormGroup;
  segmentValue = 'personal';

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      firstName: [''],
      lastName: [''],
      businessName: [''],
    });

    this.form.setValidators([this.customValidator.bind(this)]);
  }

  customValidator(control: AbstractControl): ValidationErrors | null {
    const formGroup = control as FormGroup;
    const firstName = formGroup.get('firstName')!.value;
    const lastName = formGroup.get('lastName')!.value;
    const businessName = formGroup.get('businessName')!.value;

    if (this.segmentValue === 'business' && !businessName) {
      return { businessNameRequired: true };
    }

    if (this.segmentValue === 'personal' && (!firstName || !lastName)) {
      return { namesRequired: true };
    }

    return null;
  }

  segmentChanged(event: CustomEvent) {
    this.segmentValue = event.detail.value;
    this.form.updateValueAndValidity(); // To trigger validation when segment changes
  }

  onSubmit() {
    if (this.segmentValue === 'business') {
      this.form.get('firstName')!.reset();
      this.form.get('lastName')!.reset();
    } else {
      this.form.get('businessName')!.reset();
    }
    // Proceed with form submission
    console.log(this.form.value);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>

<?-- app.component.html file ?>

<ion-toolbar>
  <ion-segment
    [(ngModel)]="segmentValue"
    (ionChange)="segmentChanged($event as CustomEvent)"
  >
    <ion-segment-button value="business"> Business </ion-segment-button>
    <ion-segment-button value="personal"> Personal </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div *ngIf="segmentValue === 'personal'">
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" formControlName="firstName" />
    <div
      *ngIf="form.hasError('namesRequired') && form.get('firstName').touched"
    >
      First Name is required.
    </div>
  </div>

  <div *ngIf="segmentValue === 'personal'">
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" formControlName="lastName" />
    <div *ngIf="form.hasError('namesRequired') && form.get('lastName').touched">
      Last Name is required.
    </div>
  </div>

  <div *ngIf="segmentValue === 'business'">
    <label for="businessName">Business Name:</label>
    <input type="text" id="businessName" formControlName="businessName" />
    <div
      *ngIf="
        form.hasError('businessNameRequired') &&
        form.get('businessName').touched
      "
    >
      Business Name is required.
    </div>
  </div>

  <button type="submit">Submit</button>
</form>