Angular12中自定义的mat-radio-group无法正常工作？
- 确认在组件文件中引入了MatRadioGroupModule和MatRadioModule：
import { MatRadioGroupModule } from '@angular/material/radio'; import { MatRadioModule } from '@angular/material/radio';
- 在HTML文件中添加自定义的mat-radio-group组件，并设置[(ngModel)]：
- 确认在组件文件中设置了selectedValue变量：
selectedValue: string;
- 在组件文件中添加以下代码，来注册自定义组件：
import { forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
const CUSTOM_RADIO_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomRadioComponent), multi: true };
@Component({ selector: 'app-custom-radio', templateUrl: './custom-radio.component.html', styleUrls: ['./custom-radio.component.scss'], providers: [CUSTOM_RADIO_VALUE_ACCESSOR] }) export class CustomRadioComponent implements ControlValueAccessor { ...
writeValue(obj: any): void { this.innerValue = obj; this.onChange(obj); this.onTouched(); }
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouched = fn; }
setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; } }
- 将自定义组件的selector放到MatRadioGroupDirective的directive里：
@Directive({ selector: 'mat-radio-group[appCustomRadio]', providers: [ {provide: NG_VALUE_ACCESSOR, useExisting: CustomRadioComponent, multi: true} ] }) export class MatRadioGroupDirective implements AfterViewInit, OnDestroy { ... }
- 在HTML文件中，将mat-radio-group的selector换成你自定义组件的selector：