NZ-RADIOGROUP [NZ-RADIO] Item be
2018-09-22 本文已影响0人
niccky
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;
}