angular - Inget värdetillgångsfel när man använder mat-slide-toggle

Jag använder Angular reaktiva formulär, formgruppen initieras i föräldrakomponenten och formkontrollerna finns i barnkomponenterna.

Problemet är att jag får följande felmeddelande när jag öppnar sidan:

ERROR Error: No value accessor for form control with unspecified name attribute

För teständamål försökte jag ersätta mat-slide-toggle med en input checkbox och felet försvinner, varför klagar det med slidern, jag kan inte förstå.

Här är ett liknande exempel:

Föräldramodul

@NgModule({
    ...
    declarations: [ParentComponent],
    imports: [
        ...,
        MatSlideToggleModule,
    ]
})
export class ParentModule {}

Föräldrakomponent

@Component({
    selector: 'app-parent',
    template: `
        <form [formGroup]="myFormGroup">
            <app-child-a [subscribedControl]="$any(myFormGroup.controls.myOption)"></app-child-a>
        </form>
    `
})
export class ParentComponent {
    public myFormGroup: FormGroup = this._fb.group({
        myOption: [true, [Validators.required]],
    });

    constructor(private _fb: FormBuilder) {}
}

Barn A-komponent

@Component({
    selector: 'app-child-a',
    template: `
        <mat-slide-toggle [formControl]="subscribedControl"></mat-slide-toggle>
    `
})
export class ChildAComponent {
    @Input() public subscribedControl!: FormControl;
}

Några idéer?

Svar #1

Baserat på det du har lämnat och med tanke på att detta inte är den ursprungliga koden, här är några saker att kontrollera:

  1. Deklarerar du din barnkomponent i din ParentModule? Eller importerar du den lämpliga modulen som innehåller den? För i den tillhandahållna koden gör du inte det. (Detta skulle förmodligen generera ett annat fel dock)
  2. Använder du det "reserverade" namnet formControl som din barns input-egenskapsnamn? Om så är fallet, ändra det till något annat. T.ex. @Input() control: FormControl.

Å andra sidan är det inte en elegant lösning att vidarebefordra formulärkontrollen själv.

Om du vill använda din ChildComponent som en återanvändbar anpassad formulärkontroll, behöver din komponent implementera ControlValueAccessor-gränssnittet och tillhandahålla det som sådant.

På det här sättet säger du i princip till Angular: "titta, min anpassade kontroll följer de regler som alla andra inbyggda formulärelement följer. Så du kan använda den i formuläret."

Om du implementerar detta gränssnitt och tillhandahåller din komponent som en CVA, behöver du inte skicka formulärkontrollen.

Du kan läsa en detaljerad förklaring i den här artikeln.

Alternativt, om du helt enkelt behöver dela upp formuläret i delformulärskomponenter och inte bryr dig om återanvändbarhet och portabilitet, kan du använda detta tillvägagångssätt.

Svar #2

Jag stötte på samma problem, men när jag skrev enhetstester för min komponent. Jag hade detta i mallen:

  <mat-slide-toggle
    color="primary"
    [class.mb-m]="!areThereAnyPhotos"
    [formControl]="$any(productClassPhotosFG.get('includePanelInTheReport'))"
  >
    {{ t('include-this-panel-in-the-report') }}
  </mat-slide-toggle>

Och när jag körde testerna fick jag detta:

Error: NG01203: No value accessor for form control unspecified name attribute. Find more at https://angular.io/errors/NG01203
error properties: Object({ code: -1203 })

Lösningen var att importera MatSlideToggleModule till min TestBed:

    await TestBed.configureTestingModule({
      imports: [MatSlideToggleModule],
    ...

Detta åtgärdade felet.