Probleme der verschachtelten reaktiven Form

Question

Ich versuche, eine reaktive Form in 2 Komponenten verschachtelt zu bauen. Die ParentComponent funktioniert gut, aber ich habe Probleme mit der ChildComponent. Diese ChildComponent verwendet ControlValueAccessor.

Frage: Die Felder erscheinen in der Ansicht, aber Änderungen gehen nicht zum übergeordneten Element. Warum? Sind meine ControlValueAccessor Funktionen richtig?

child.component.html

<ul [formGroup]="fieldsForm"> 
    <li *ngFor="let field of fields"> 
     <label> 
     <input type="checkbox" [formControlName]="field.$key"> 
     {{field.$key}} 
     </label> 
    </li> 

</ul> 

child.component.ts

import {Component, OnInit, Input, ChangeDetectionStrategy} from '@angular/core'; 
import {FormGroup, FormBuilder, NG_VALUE_ACCESSOR, ControlValueAccessor} from "@angular/forms"; 
import {NodeService} from "../../node.service"; 

@Component({ 
    selector: 'child', 
    templateUrl: './child.component.html', 
    styleUrls: ['./child.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    providers: [ 
    {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =>ChildComponent), multi: true} 
    ] 
}) 
export class ChildComponent implements OnInit,ControlValueAccessor { 

    public fieldsForm: FormGroup; 
    public fields: any = []; 

    @Input() currentFilter; 
    @Input() formControlName; 

    constructor(private fb: FormBuilder, private nodeService: NodeService) { 
    this.fieldsForm = this.fb.group({}); 
    } 

    ngOnInit() { 
    this.getFilterValues(this.formControlName) 
    .subscribe(fields => { 
     const acc = {}; 
     this.fields = fields; 
     fields.forEach(field => acc[field.$key] = [true]); 
     this.fieldsForm = this.fb.group(acc); 
    }) 
) 

    registerOnChange(fn: (value: any) => void) { 
    this.fieldsForm.valueChanges.subscribe(fn); 
    } 

    registerOnTouched() {} 

    getFilterValues(type) { 
    return this.nodeService.getFilterValues(type, { 
     query: { orderByValue: true, equalTo: 1 } 
    }) 
    } 

} 

parent.component.ts

parent.component.html

<form [formGroup]="form" novalidate> 
    <fieldset *ngFor="let group of groups"> 

    <child [formControlName]="group" [currentFilter]="currentFilters[group]"></child> 

    </fieldset> 
</form> 

Ich habe für die letzten 3 Wochen auf diesem Formular gewesen. Ich habe es mit beiden Arten von Formularen, verschachtelt oder in einer einzigen Komponente gemacht. Ich fühle mich wie ControlValueAccessor zu verwenden. Ich hoffe, dass mir jemand helfen kann. Vielen Dank!

Answer 1

Sollten Sie nicht einfach einen Anbieter auf einer höheren Ebene registrieren? Z.B. in ParentComponent? Jetzt ist NG_VALUE_ACCESSOR für die ChildComponent und ihre Kinder verfügbar.

Ich habe einen anderen Ansatz für das Mischen verschachtelte Komponenten und reaktive Formen - nur durch die Übergabe FormGroup an Kinder als @Input. Works for me.