ng Switch Angular data matching when changing

Question

add-university.component.html

<div class="row">
      <div class="col-md-3">
        <div class="step-menu">
          <h5 *ngFor="let item of stepMenu; let index = index"
              [ngClass]="{ 'active-menu': current === index }"
              (click)="menuBar(index)"
          >{{ item }}
          </h5>
        </div>
      </div>
      <div class="col-md-9">
        <div [ngSwitch]="current">
          <app-univer-header-information *ngSwitchCase="0"></app-univer-header-information>
          <app-univer-general-information *ngSwitchCase="1"></app-univer-general-information>
          <app-univer-academic-information *ngSwitchCase="2"></app-univer-academic-information>
          <app-univer-admission-information *ngSwitchCase="3"></app-univer-admission-information>
          <app-univer-price-information *ngSwitchCase="4"></app-univer-price-information>
          <app-univer-campus-information *ngSwitchCase="5"></app-univer-campus-information>
          <app-univer-scholarship-information *ngSwitchCase="6"></app-univer-scholarship-information>
        </div>
      </div>
    </div>

univer-header-information.component.html

<form action="" [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label>Название университета</nz-form-label>
      <nz-form-control nzErrorTip="The input is not valid E-mail!">
        <input nz-input formControlName="nameUniversity" placeholder="Oxford university" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>Страна</nz-form-label>
      <nz-form-control nzErrorTip="The input is not valid E-mail!">
        <nz-select class="select-for-university" formControlName="country" nzPlaceHolder="США">
          <nz-option nzValue="Мастер эксперт" nzLabel="Мастер эксперт"></nz-option>
          <nz-option nzValue="Эксперт" nzLabel="Эксперт"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
</form>

univer-header-information.component.ts

ngOnInit(): void {
    this.validateForm = this.fb.group({
      nameUniversity: [null, [Validators.required]],
      country: [null, [Validators.required]]
    });
  }

Here I have such an ngSwitch in the parent component. I move between the components by pressing h5. As shown in the code. And inside each component there is a form, as I showed in the example code. The problem is that when I move with them, for example, I filled out the first stage, then I move to the second stage and then move to the first one, or rather I will go back if it is empty. I need it to keep the written value. I can't do it can you help.

I did using Output Input, but couldn't solve it or used them incorrectly

ng Switch Angular data matching when changing

0 Answers0