使用：
<app-radio-group class="xs-edition"
[labels]="['個(gè)人版', '企業(yè)版']"
[values]="[0, 1]"
[name]="'license'"
[(ngModel)]="item.productLicense"
></app-radio-group>
TS
import {Component, forwardRef, Input, OnInit} from '@angular/core'
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'
import {RadioGroupItem} from './radio-group-item'
const CUSTOM_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioGroupComponent),
multi: true
}
@Component({
selector: 'app-radio-group',
templateUrl: './radio-group.component.html',
styleUrls: ['./radio-group.component.scss'],
providers: [CUSTOM_VALUE_ACCESSOR]
})
export class RadioGroupComponent implements OnInit, ControlValueAccessor {
private _value: RadioGroupItem = new RadioGroupItem()
@Input() values = []
@Input() labels = []
@Input() name = 'radioGroup'
onChange = (_) => {
}
onTouched = () => {
}
writeValue(obj: any): void {
if (this._value !== obj) {
this._value = obj
}
}
registerOnChange(fn: any): void {
this.onChange = fn
}
registerOnTouched(fn: any): void {
this.onTouched = fn
}
constructor() {
}
ngOnInit() {
}
}
HTML
<ul>
<li *ngFor="let item of values; let i = index">
<input type="radio" [value]="item" [name]="name" [id]="name + '_' + i" [ngModel]="_value" (ngModelChange)="_value = $event; onChange($event)">
<label [for]="name + '_' + i" [class.checked]="_value === item">{{ labels[i] || '' }}</label>
</li>
</ul>
CSS/SCSS
ul {
display: flex;
li {
flex-grow: 1;
input[type=radio] {
display: none;
}
label {
display: block;
margin: 0;
text-align: center;
padding: 1em 0;
border: 1px solid #eeeeee;
&.checked {
border: 1px solid #127cc3;
}
}
}
}
