Отображение кнопки рядом с текстовым полем в Angular

Question

Я создал кнопку "X" на странице. Тем не менее, он отображается под текстовым полем.

Как отобразить его рядом с текстовым полем с помощью начальной загрузки?

<div class="form-group row">
      <div class="field">
        <input
          type="text"
          id="{{ i }}"
          [(ngModel)]="fields[i]"
          name="name{{ i }}"
          (ngModelChange)="onChange()"
          class="form-control"
          #field="ngModel"
          required
        />
        <button
          class="remove"
          mat-mini-fab
          color="warn"
          (click)="removeField(i)"
          type="button"
        >
          X
        </button>
      </div>
</div>

Answer 1

Bootstrap class .form-control устанавливает ширину поля ввода на 100%. Либо вставьте это в ваш css:

.form-control {
    width: 30%;  // or whatever width you want
    float: left;
}

Или удалите класс .form-control из ввода и добавьте форму-горизонталь, если вам не нужно стилизовать поле ввода (или создайте его самостоятельно)):

      <div class="form-group">
        <div class="field form-horizontal">
          <input
            type="text"
            id="{{ i }}"
            [(ngModel)]="fields[i]"
            name="name{{ i }}"
            (ngModelChange)="onChange()"
            #field="ngModel"
            required
          />
          <button
            class="remove"
            mat-mini-fab
            color="warn"
            (click)="removeField(i)"
            type="button"
          >
            X
          </button>
        </div>
      </div>