Angular - Как стилизовать мою форму для размещения всех данных поля - PullRequest
0 голосов
/ 03 октября 2019

Я работаю над приложением, использующим интерфейс Angular-7. В приведенной ниже форме элементы поля формы усекаются, и отображается не все:

form image

addModal

<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Add New Role</h5>
            <button type="button" class="close" (click)='closeAddModal()'>
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
                <div class="alert alert-danger" [hidden]="!error.name">
                    {{ error.name }}
                  </div>
            <form #editRoleForm=ngForm>
            <div class="form-group">
                    <label for="name">Name</label>
                  <input type="name" name="name" id="inputName" class="form-control" placeholder="Name" [(ngModel)]="form.name" required>
                </div>
                <div class="form-group">
                    <label for="name">Permissions</label>
                    <div *ngFor="let permission of permissions">
                        <input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkboxAdd($event)"> {{ permission.name }}
                    </div>
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editRoleForm.valid">Save changes</button>
            <button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
         </div>
        </div>
      </div>
</div>

editModal

<div id="editModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
    <div class="modal-dialog" role="document">
       <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Edit Role</h5>
            <button type="button" class="close" (click)='closeEditModal()'>
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
                <div class="alert alert-danger" [hidden]="!error.name">
                    {{ error.name }}
                  </div>
            <form #newRoleForm=ngForm>
              <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" name="name" placeholder="Enter name"  required [(ngModel)]="data.name"/>
              </div>
              <div class="form-group">
                  <label for="name">Permissions</label>
                  <div *ngFor="let permission of permissions">
                      <input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkbox($event)" *ngIf="!data.permission.includes(permission.name)">
                    <input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkbox($event)" *ngIf="data.permission.includes(permission.name)" checked> {{ permission.name }}
                  </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary"  [disabled]="!newRoleForm.valid" (click)='editsubmit()'>Save changes</button>
            <button type="button" class="btn btn-secondary" (click)='closeEditModal()'>Close</button>
          </div>
        </div>
      </div>
</div>

Как оформить форму так, чтобы отображались все элементы формы (я даже не вижу кнопку отправки)? Это может быть даже в трех столбцах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...