Я создаю многостраничную форму в Angular, используя nav-tabs и tab-content. Я могу переключаться между вкладками, но содержимое не отображается ни на одной из вкладок. До того, как я добавил фейдеры на панели вкладок, содержание шага 1 показывалось на каждом шаге, поэтому фейдинг может быть одной из проблем, но не единственной, на мой взгляд ... Ниже приведен мой код, любая помощь признателен!
Я получил html с этого сайта: https://getbootstrap.com/docs/4.4/components/navs/#tabs
Было бы удивительно, если бы можно было сделать эти вкладки и ссылки на них все в одном и том же URL-адресе (поэтому не меняя его), поэтому, если кто-нибудь знает, как это сделать (если это возможно), то вы удивительны!
<nav>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="step1" data-toggle="tab" href="infotemplate/#step1" role="tab" aria-controls="step1" aria-selected="true">Step 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="step2" data-toggle="tab" href="infotemplate/#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2</a>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" role="tabpanel" id="step1" aria-labelledby="step1">
<form [formGroup]="basicsform">
<div>
<div class="required-field">Full name:</div>
<input type="text" formControlName="name" placeholder="Full name">
</div>
<div>
Label:
<input type="text" formControlName="label" placeholder="Label">
</div>
<div>
<div class="required-field">E-mail:</div>
<input type="email" formControlName="email" placeholder="E-mail">
</div>
<div>
URL to picture:
<input type="url" formControlName="picture" placeholder="Picture URL">
</div>
<div>
<div class="required-field">Phone number:</div>
<input type="text" formControlName="phone" placeholder="Phone number">
</div>
<div>
URL to website:
<input type="url" formControlName="website" placeholder="Website URL">
</div>
<div>
Summary:
<input type="text" formControlName="summary" placeholder="Summary">
</div>
<div formGroupName="location">
<h6>Location</h6>
<div>
<div class="required-field">Address:</div>
<input type="text" formControlName="address" placeholder="Address">
</div>
<div>
<div class="required-field">City:</div>
<input type="text" formControlName="city" placeholder="City">
</div>
<div>
<div class="required-field">Postal Code:</div>
<input type="text" formControlName="postalCode" placeholder="Postal code">
</div>
<div>
<div class="required-field">Country code:</div>
<input type="text" formControlName="countryCode" placeholder="Country code">
</div>
<div>
Region:
<input type="text" formControlName="region" placeholder="Region">
</div>
</div>
</form>
</div>
<div class="tab-pane fade" role="tabpanel" id="step2" aria-labelledby="step2">
<form [formGroup]="basicsform">
<div formArrayName="profiles" *ngFor="let profile of basicsform.get('profiles').controls; let i = index;">
<div [formGroupName]="i">
<em><b>Profile {{i + 1}}:</b></em>
<div class="required-field">Network:</div>
<input type="text" formControlName="network" placeholder="Network">
<div class="required-field">Username:</div>
<input type="text" formControlName="username" placeholder="Username">
<div class="required-field">URL:</div>
<input type="text" formControlName="url" placeholder="URL"><br>
<button (click)="deleteProfile(i)">Delete Profile {{i+1}}</button><br>
</div><br><br>
</div><br>
<div><button (click)="addProfile()" [disabled]="basicsform.get('profiles').invalid">Add
profile</button></div><br>
</form>
</div>