Web Components - Posts

<div class="bg-primary text-white"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active m-3 px-5 fs-5 text-dark" data-bs-toggle="tab" href="#tabContent1">Form creation Tab</a> </li> <li class="nav-item"> <a class="nav-link m-3 px-5 fs-5 text-dark" data-bs-toggle="tab" href="#tabContent2">Alignment Tab</a> </li> <li class="nav-item"> <a class="nav-link m-3 px-5 fs-5 text-dark" data-bs-toggle="tab" href="#tabContent3">Tab 3</a> </li> </ul> </div> <div class="mt-5 mx-5 p-2 text-dark"> <div class="tab-content"> <div class="tab-pane fade show active" id="tabContent1"> <div class="form-section"> <div *ngFor="let formIndex of [1, formCounter]"> <div class="row mb-3"> <div class="col"> <label for="forms" class="form-label">Forms</label> <input type="text" class="form-control" id="forms" placeholder="Forms"> </div> <div class="col"> <label for="redirectPath" class="form-label">Redirect Path</label> <input type="text" class="form-control" id="redirectPath" placeholder="Redirect Path"> </div> <div class="col mt-4"> <button type="button" class="btn btn-primary" (click)="addForm()">+</button> <button type="button" class="btn btn-danger" *ngIf="formCounter > 1" (click)="removeForm()">-</button> </div> </div>

      <div class="field-section" *ngFor="let fieldSection of fieldSections; let i = index">
        <div class="row mb-3">
          <div class="col">
            <label for="fieldName" class="form-label">Field Name</label>
            <input type="text" class="form-control" [(ngModel)]="fieldSection.fields[i].fieldName" placeholder="Field Name">
          </div>
          <div class="col">
            <label for="fieldType" class="form-label">Field Types</label>
            <select class="form-select" [(ngModel)]="fieldSection.fields[i].fieldType">
              <option value="text">Varchar Field</option>
              <!-- Add more options as needed -->
            </select>
          </div>
          <div class="col d-flex mt-4">
            <div class="ms-auto">
              <button type="button" class="btn btn-primary" (click)="addField(fieldSection)">+</button>
              <button type="button" class="btn btn-danger" *ngIf="fieldSection.fields.length > 1" (click)="removeField(fieldSection, i)">-</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Empty space for Alignment Tab -->
<div class="tab-pane fade" id="tabContent2" style="height: 200px;"></div>

<!-- Empty space for Tab 3 -->
<div class="tab-pane fade" id="tabContent3" style="height: 300px;"></div>

</div> </div>