美文网首页
NZ-RADIOGROUP [NZ-RADIO] Item be

NZ-RADIOGROUP [NZ-RADIO] Item be

作者: niccky | 来源:发表于2018-09-22 13:10 被阅读0次
    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;
    }
    

    相关文章

      网友评论

          本文标题:NZ-RADIOGROUP [NZ-RADIO] Item be

          本文链接:https://www.haomeiwen.com/subject/hkftgftx.html