Кутова реактивна форма - "рекурсивні" форми - форми, кутові, рекурсії

Я створюю форму для цього інтерфейсу (наприклад):

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

вибачте за найменування Тхо: P

Що я намагаюся зробити - це форма, яку ви можете додати додаткову Mains на ходу, і кожен із внутрішніх Mains може також додати свій власний внутрішній Mainс
Але я поняття не маю, як реалізувати рекурсивність Mains всередині оригіналу Mainщодо реактивних форм.

Я використовую FormBuilder, і я стежу приклад на документи.

Я знаю, що це не дуже багато даних, але я не маю нічого, що не є основним в моєму коді зараз.

Відповіді:

тож, подумавши, я вирішив проблему!

Отже, якщо ви будете слідувати навчальному посібнику, у вас буде код, подібний до цього у вашому компоненті:

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"
});
}
}

так що я зробив, я змінив FormGroup бути @Input() heroForm: FormGroup = null,
І я додав метод отримання FormGroup за індексом:

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

і я його використовував у html наступним чином:

<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>