I need some help and I'm getting nuts by doing this. i have a parentForm calls disclosureForm: In this disclosureForm there could be an amount of n subforms called household. The Amount of subforms depends on the amount of Tabs. Each houseHold Tab could have an amount of n on different subforms also depending on the amount of tabs for example: one household could have an amount of n applicants each applicant does have his own subtab which includes his own form.
The structure should be like the following example.
disclosureForm: {
household_1:{
applicant_1: {
name: doe,
firstName: john,
birthdate: ......
},
applicant_2: {
name: doe,
firstName: jane,
birthdate: ......
}
},
household_2: {
applicant_1: {
name: page,
firstName: jimmy,
birthdate: .....
}
}
}
My HTML structure looks like:
<mat-tab-group [selectedIndex]="haushaltSelected.value">
<mat-tab *ngFor="let tab of haushaltTabs; let haushaltTabindex = index" [label]="tab">
<form [formGroup]="disclosureForm">
<div @fadeInUp class="card overflow-hidden">
<mat-vertical-stepper #verticalStepper="matVerticalStepper" [linear]="true">
<ng-template matStepperIcon="edit">
<mat-icon [icIcon]="icDoneAll"></mat-icon>
</ng-template>
<ng-template matStepperIcon="done">
<mat-icon [icIcon]="icDoneAll"></mat-icon>
</ng-template>
<mat-step [stepControl]="applicantForm">
<ng-template matStepLabel>Personal Data</ng-template>
<div class="title m-0">Applicant Information</div>
<div class="subheading-1">Please fill the Form with your personal data.</div>
<mat-tab-group [selectedIndex]="applicantSelected.value">
<mat-tab *ngFor="let tab of applicantTabs; let index = index" [label]="tab">
<div [formGroup]="applicantForm">
<div class="mt-4" fxLayout="column" fxLayoutGap="8px">
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<mat-radio-group class="mb-4" fxLayout="row" fxLayoutGap="16px" formControlName="personTitle">
<div class="form-check form-check-inline" *ngFor="let title of titles">
<mat-radio-button color="primary" [id]="title" [value]="title">{{ title }}</mat-radio-button>
</div>
</mat-radio-group>
<mat-radio-group class="ml-8" fxLayout="row" formControlName="academicTitle" fxLayoutGap="16px">
<div class="form-check form-check-inline" *ngFor="let acadmeic of academicTitles">
<mat-checkbox color="primary" type="checkbox" [id]="acadmeic">{{acadmeic}}</mat-checkbox>
</div>
</mat-radio-group>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="auto">
<mat-label>Name</mat-label>
<input formControlName="name" matInput required>
<mat-hint>Bitte geben Sie Ihren Nachnamen ein.</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="auto">
<mat-label>Vorname</mat-label>
<input formControlName="firstName" matInput required>
<mat-hint>Bitte geben Sie alle Ihren Vornamen gemäß Ausweis ein.</mat-hint>
</mat-form-field>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="49.2%">
<mat-label>E-Mail</mat-label>
<input formControlName="email" matInput required>
<mat-hint>Bitte geben Sie Ihre Email Adresse in folgendem Format an: example@example.com</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="49.2%">
<mat-label>E-Mail wiederholen</mat-label>
<input formControlName="confirmEmail" matInput required>
<mat-hint>Bitte wiederholen Sie die zuvor eingegebene Email Adresse</mat-hint>
</mat-form-field>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="50%">
<mat-label>Geburtsdatum</mat-label>
<input formControlName="birthDate" [matDatepicker]="datepickerRef" matInput>
<mat-datepicker-toggle [for]="datepickerRef" matSuffix></mat-datepicker-toggle>
<mat-datepicker #datepickerRef></mat-datepicker>
<mat-hint>Bitte geben Sie ihr Geburtsdatum an. Ein Klick auf das Icon öffnet die Datumsauswahl.</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="50%">
<mat-label>Geburtsort</mat-label>
<input formControlName="cityOfBirth" matInput required>
<mat-hint>Bitte geben Sie Ihren Geburtsort ein.</mat-hint>
</mat-form-field>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<div fxFlex="auto" fxLayout="row" fxLayoutGap="12px">
<mat-form-field fxFlex="75%">
<mat-label>Straße</mat-label>
<input formControlName="address" matInput required>
<mat-hint>Bitte geben Sie Ihre Straße an.</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="25%">
<mat-label>Nr.</mat-label>
<input formControlName="houseNumber" matInput required>
<mat-hint>Hausnummer</mat-hint>
</mat-form-field>
</div>
<div fxFlex="auto" fxLayout="row" fxLayoutGap="12px">
<mat-form-field fxFlex="25%">
<mat-label>PLZ</mat-label>
<input formControlName="postalCode" matInput required>
<mat-hint>Postleitzahl</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="75%">
<mat-label>Ort</mat-label>
<input formControlName="city" matInput required>
<mat-hint>Bitte geben Sie Ihren Wohnort an.</mat-hint>
</mat-form-field>
</div>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="auto">
<mat-label>Wohnhaft seit</mat-label>
<input formControlName="residentSince" matInput required>
<mat-hint>Bitte geben Sie an seit wann sie an oben genannter Adresse wohnen.</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="auto">
<mat-label>Steuer ID</mat-label>
<input formControlName="taxNo" matInput required>
<mat-hint>Bitte geben Sie Ihre Steueridentifikationsnummer an.</mat-hint>
</mat-form-field>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="50%">
<mat-label>Familienstand</mat-label>
<mat-select formControlName="familyStatus" required>
<mat-option *ngFor="let option of familyStatus" [value]="option">{{ option }}</mat-option>
</mat-select>
<mat-hint>Bitte geben Sie Ihren Familienstand an</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="50%">
<mat-label>Staatsangehörigkeit</mat-label>
<mat-select formControlName="nationality" required>
<mat-option *ngFor="let option of nationality" [value]="option">{{ option }}</mat-option>
</mat-select>
<mat-hint>Bitte geben Sie Ihre Nationalität an</mat-hint>
</mat-form-field>
</div>
<hr class="mt-4">
<div class="subheading-1">Bitte geben Sie Informationen zu Ihrem Einkommen und Ihrer Beschäftigung an.</div>
<div class="mt-4" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="50%">
<mat-label>Art der Beschäftigung</mat-label>
<mat-select formControlName="employment" required>
<mat-option *ngFor="let option of employmentMode" [value]="option">{{ option }}</mat-option>
</mat-select>
<mat-hint>Bitte geben Sie Ihre Beschftigungsart an</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="50%">
<mat-label>Einkommen</mat-label>
<input formControlName="revenues" matInput required>
<mat-hint>Bitte geben Sie Ihr monatliches Nettoeinkommen an.</mat-hint>
</mat-form-field>
</div>
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<mat-form-field fxFlex="50%">
<mat-label>Sozialversicherungsnummer</mat-label>
<input formControlName="nationalInsuranceNumber" matInput required>
<mat-hint>Bitte geben Sie Ihre Sozialversicherungsnummer an</mat-hint>
</mat-form-field>
<div fxFlex="50%" fxLayout="row" fxLayoutGap="12px">
<mat-form-field fxFlex="50%">
<mat-label>Einkommen Vorjahr</mat-label>
<input formControlName="lastYearRevenue" matInput required>
<mat-hint>Bitte geben Sie Ihr Vorjahreseinkommen an.</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="50%">
<mat-label>Einkommen aktuelles Jahr</mat-label>
<input formControlName="currentYearRevenue" matInput required>
<mat-hint>Bitte geben Sie Ihr aktuelles Jahreseinkommen an.</mat-hint>
</mat-form-field>
</div>
</div>
</div>
<hr class="mt-6">
</div>
</mat-tab>
</mat-tab-group>
<div class="actions mt-4" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<button (click)="addPerson(haushaltTabindex)" color="primary" mat-button type="button">weitere Person hinzufügen</button>
<button (click)="verticalStepper.reset()" [disabled]="" color="primary"
mat-button
type="button">Zurücksetzen
</button>
<button [disabled]="" color="primary" mat-raised-button matStepperNext>
Weiter
</button>
</div>
</mat-step>
<mat-step [stepControl]="">
<form>
<ng-template matStepLabel>Vermögen</ng-template>
<div class="title m-0">Vermögen</div>
<div class="subheading-1">Geben Sie hier Ihre Vermögenswerte an.</div>
<div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<button color="primary" mat-button matStepperPrevious type="button">PREVIOUS</button>
<button [disabled]="" color="primary" mat-raised-button matStepperNext>
NEXT
</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="">
<form [formGroup]="">
<ng-template matStepLabel>Einnahmen</ng-template>
<div class="title m-0">You're almost there!</div>
<div class="subheading-1">To finish registration, accept our terms of service and click on "Create Account".
</div>
<div class="mt-4" fxLayout="column" fxLayoutGap="8px">
<mat-checkbox class="checkbox" formControlName="terms">
I agree to the terms of service and the usual stuff. *
</mat-checkbox>
</div>
<div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<button color="primary" mat-button matStepperPrevious type="button">PREVIOUS</button>
<button (click)="submit()" [disabled]="" color="primary" mat-raised-button
matStepperNext>
CREATE ACCOUNT
</button>
</div>
</form>
</mat-step>
</mat-vertical-stepper>
</div>
</form>
</mat-tab>
</mat-tab-group>
How can I achieve that every form in his own tab got an own reference to a Formgroup, which are dynamically generated? I've tried a lot of tutorials, but they're always in one Formgroup and not multiple forms in their in own Tabs. I'm stuck :(