NZ-RADIOGROUP [NZ-RADIO] Item beforeChange Hook

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;
  @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: '一些解释',
      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);
      }
    });
  }

}


      
        A
      
      
        B
      
      
        C
      
      
        D
      
    

    
  :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;
}