79561682

Date: 2025-04-08 09:44:01
Score: 0.5
Natty:
Report link

thank you your response , so after modifing my code by using your code , it shows me again : ERROR Error: A mat-tab-nav-panel must be specified via [tabPanel].

<div class="page-container">
<header>
    <h1>Test Page</h1>
</header>

<div class="main-layout">
    <nav>
        <app-navbar></app-navbar>
    </nav>

    <main>
        <h2>Test</h2>
        <app-breadcrumb></app-breadcrumb>

        <h3>Sections</h3>

        <!-- Barre de navigation des onglets -->
        <nav mat-tab-nav-bar [tabPanel]="tabPanel">
            <a mat-tab-link
               (click)="activeLink = 'form'"
               [active]="activeLink === 'form'">Formulaire</a>
            <a mat-tab-link
               (click)="activeLink = 'table'"
               [active]="activeLink === 'table'">Tableau</a>
            <a mat-tab-link
               (click)="activeLink = 'chart'"
               [active]="activeLink === 'chart'">Graphiques</a>
        </nav>

        <!-- Ajout du panneau de nav -->
        <mat-tab-nav-panel #tabPanel>
            <ng-container *ngIf="activeLink === 'form'">
                <form (ngSubmit)="onSubmit(testForm)" #testForm="ngForm">
                    <mat-form-field appearance="fill" class="full-width">
                        <mat-label>Input Text (mandatory)</mat-label>
                        <input matInput id="inputText" name="inputText" ngModel required>
                        <mat-error *ngIf="isControlInvalid(testForm.controls['inputText'])">Input text is required.</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="fill" class="full-width">
                        <mat-label>Date (DD/MM/YYYY)</mat-label>
                        <input matInput type="text" id="date" name="date" ngModel placeholder="DD/MM/YYYY" required>
                        <mat-error *ngIf="isControlInvalid(testForm.controls['date'])">Valid date is required.</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="fill" class="full-width">
                        <mat-label>Email (mandatory)</mat-label>
                        <input matInput id="email" name="email" ngModel required>
                        <mat-error *ngIf="isControlInvalid(testForm.controls['email'])">Valid email is required.</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="fill" class="full-width">
                        <mat-label>Phone Number</mat-label>
                        <input matInput type="tel" id="phone" name="phone" ngModel>
                    </mat-form-field>

                    <div class="button-group">
                        <button mat-raised-button color="primary" type="submit" [disabled]="testForm.invalid">Submit</button>
                        <button mat-button type="button" (click)="resetForm(testForm)">Reset</button>
                    </div>
                </form>
            </ng-container>

            <ng-container *ngIf="activeLink === 'table'">
                <h3>Table Section</h3>
                <app-table [data]="tableData"></app-table>
            </ng-container>

            <ng-container *ngIf="activeLink === 'chart'">
                <h3>Chart Section</h3>
                <app-chart [data]="chartData"></app-chart>
            </ng-container>
        </mat-tab-nav-panel>
    </main>
</div>
Reasons:
  • Blacklisted phrase (0.5): thank you
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Mouheb Sabri