Angular Reactive Forms - "rekursiven" Formen

Question

Ich bin ein Formular für diese Schnittstelle (zum Beispiel) zu schaffen:

interface Main { 
    name: string; 
    inners: Main[]; 
} 

sorry für die Namensgebung tho: P

Was ich versuche zu tun ist ein Formular, dass Sie zusätzliche Main s auf dem Sprung hinzufügen können, und jeder der inneren Main s kann auch eigene innere Main s hinzufügen.
Aber ich habe keine Ahnung, wie die Rekursivität der Main s innerhalb der ursprünglichen Main, in Bezug auf reaktive Formen zu implementieren.

Ich benutze FormBuilder, und bin folgende the example on the docs.

Ich weiß, dass dies nicht viele Daten sind, aber ich habe nichts, was in meinem Code nicht grundlegend ist.

Answer 1

also, nach einigem Nachdenken, löste ich das Problem!

Also, wenn Sie das Tutorial folgen, werden Sie Code ähnlich wie diese in Ihrer Komponente haben:

export class HeroDetailComponent3 { 
    heroForm: FormGroup; // <--- heroForm is of type FormGroup 

    constructor(private fb: FormBuilder) { // <--- inject FormBuilder 
    this.createForm(); 
    } 

    createForm() { 
    this.heroForm = this.fb.group({ 
     name: '', // <--- the FormControl called "name" 
    }); 
    } 
} 

so, was ich tat, änderte ich den FormGroup@Input() heroForm: FormGroup = null sein,
Und ich habe hinzugefügt ein Verfahren zur Herstellung der FormGroup bei Index bekommen:

innerMainAt(index: number): FormGroup { 
    return this.inners.at(index) as FormGroup; 
} 

und ich habe es in den html auf folgende Weise verwendet:

<div formArrayName="inners"> 
    <div *ngFor="let inner of inners.controls; let i=index;" [formGroupName]="i"> 
     // VVV this is the component, and it creates itself 
     <app-hero-form [heroForm]="innerMainAt(i)"</app-hero-form> // notice innerMainAt(i) 
    </div> 
</div>