NG01203：mat-radio-group 的表单控件名称没有值访问器

Question

单元测试失败，提示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是

<mat-radio-group aria-label="Select an option"  class="w-48" id="gender" name="gender" formControlName="gender" >
            <mat-radio-button value="Male" name="male">Male</mat-radio-button>
            <mat-radio-button value="Female" name="female">Female</mat-radio-button>      
          </mat-radio-group>

我在这里做错了什么

     {
          provide: NG_VALUE_ACCESSOR,  
          useExisting:  myComponent, 
          multi: true
        }

Answer 1

确保您拥有正确的值访问器： 验证您使用的是正确的值访问器令牌 (

NG_VALUE_ACCESSOR

) 并且它与您的自定义表单控件实现相匹配。

2. 检查您的自定义表单控件： 确保您已在自定义表单控件组件中正确实现了

   ControlValueAccessor

   接口。

   import { Component, forwardRef } from '@angular/core';
   import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   
   @Component({
     selector: 'app-custom-radio-group',
     template: `
       <mat-radio-group [value]="value" (change)="onChange($event)">
         <ng-content></ng-content>
       </mat-radio-group>
     `,
     providers: [
       {
         provide: NG_VALUE_ACCESSOR,
         useExisting: forwardRef(() => CustomRadioGroupComponent),
         multi: true,
       },
     ],
   })
   export class CustomRadioGroupComponent implements ControlValueAccessor {
     value: any;
     onChange: (value: any) => void = () => {};
     onTouched: () => void = () => {};
   
     writeValue(value: any): void {
       this.value = value;
     }
   
     registerOnChange(fn: (value: any) => void): void {
       this.onChange = fn;
     }
   
     registerOnTouched(fn: () => void): void {
       this.onTouched = fn;
     }
   }
   

   确保您的自定义表单控件正确实现

   ControlValueAccessor

   接口并提供

   NG_VALUE_ACCESSOR

   。

3. 检查您的测试配置：

   例如：

   TestBed.configureTestingModule({
     declarations: [CustomRadioGroupComponent, YourComponent], // Include your custom form control and your component
     imports: [ReactiveFormsModule, MatRadioModule],
   }).compileComponents();
   

4. 检查测试 HTML： 在您的测试 HTML 模板中，确保您正确使用自定义表单控件：

   <app-custom-radio-group formControlName="gender">
     <mat-radio-button value="Male">Male</mat-radio-button>
     <mat-radio-button value="Female">Female</mat-radio-button>
   </app-custom-radio-group>
   

请验证这些方面，如果问题仍然存在，请提供有关自定义表单控件实现和测试设置的更多详细信息，以便我可以帮助您。