here is my html:

 <tr *ngFor="let sdata of suppliers | async; let i = index">
        <td>
          <div class="d-flex gap-3">
            <input
              type="radio"
              formControlName="supplier"
              [value]="sdata.supplier_id"
              [checked]="supplierForm.get('supplier')?.value === sdata.supplier_id"
              (change)="onRadioChange($event)"
            />
            <div>{{ sdata?.name }}</div>
          </div>
        </td>
        <td>
          <button class="spbutton" (click)="updateSuppliers(sdata)" nz-button nzType="default" nzShape="round" (mousedown)="$event.stopPropagation()">
            <span class="iconSize"><i class="flaticon-editing"></i></span>
          </button>
        </td>
      </tr>

ts:

initializeSupplierForm(): void {
  this.supplierForm = this.formBuilder.group({
    supplier: new FormControl(''),
  });

  this.setSupplierFormData();
}

setSupplierFormData(): void {
  // Patch the form with values from the loaded product
  this.supplierForm.patchValue({
    supplier: this.loadedProduct?.supplier,
  });

}

onRadioChange(event: Event): void {
  const selectedId = this.supplierForm.get('supplier').value;
  this.selectedSuppliers = selectedId;
}

getFormData(): any {
  const formData = this.supplierForm.value;

  formData.supplier = formData.supplier ? (formData.supplier) : this.loadedProduct?.supplier;

  return formData;
}

Firstly if i change radio field from label its not working, then if i select only radio button then it works if not select it will send empty array but i want if i not select any radio button it should send empty string how to implement this. if possible i want to use ng-zorro radio