import { Component, ViewChild, ViewChildren, SimpleChange, SimpleChanges, QueryList } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NzModalService, NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  form: FormGroup;
  constructor(private fb: FormBuilder, private modal: NzModalService) { }
  @ViewChildren(NzRadioComponent) radios: QueryList<NzRadioComponent>;
  @ViewChild(NzRadioGroupComponent) group: NzRadioGroupComponent;
  ngOnInit() {
    this.form = this.fb.group({
      name: ['user name'],
      radio: ['A']
    })
  }

  
  radioValue: any = 'A';
  resetMagic(group, newValue) {
    this.modal.confirm({
      title: '您是否确认要删除这项内容',
      content: '<b>一些解释</b>',
      onOk: () => {
        this.radioValue = newValue;
        group.updateValue(newValue);
        console.log('确定');
        console.log(this.radioValue, newValue, this.form.value.radio);
      },
      onCancel: () => {
        group.updateValue(this.radioValue);
        console.log(this.radioValue, newValue, this.form.value.radio);
      }
    });
  }

}

<nz-radio-group formControlName="radio" #radioModel>
      <label nz-radio [nzValue]="'A'"    (click)="resetMagic(radioModel,'A')" >
        <span >A</span>
      </label>
      <label nz-radio [nzValue]="'B'"    (click)="resetMagic(radioModel,'B')" >
        <span >B</span>
      </label>
      <label nz-radio [nzValue]="'C'"  [nzDisabled]="true"  (click)="resetMagic(radioModel,'C')" >
        <span >C</span>
      </label>
      <label nz-radio [nzValue]="'D'"  (click)="resetMagic(radioModel,'D')" >
        <span >D</span>
      </label>
    </nz-radio-group>

    
  :host ::ng-deep .ant-radio-disabled .ant-radio-inner {
  border-color: #d9d9d9 !important;
  background-color: #fff;
}
:host ::ng-deep .ant-radio-disabled .ant-radio-inner:after {
  background-color: #fff;
}
:host ::ng-deep .ant-radio-disabled .ant-radio-input {
  cursor: pointer;
}
:host ::ng-deep .ant-radio-disabled + span {
  color: #666;
  cursor: pointer;
}

:host ::ng-deep .ant-radio-disabled:hover .ant-radio-inner,
:host ::ng-deep .ant-radio-disabled .ant-radio-inner:hover {
  border-color: #108ee9 !important;
}