Вложенная группа ввода в угловом компоненте - PullRequest
Новая
       49

Вложенная группа ввода в угловом компоненте

0 голосов
/ 21 октября 2019

Я создал компонент ввода и компонент DatePicker в угловых. Мой компонент ввода создает в базе параметра типа правильный тег ввода для текста, число ecc. для выбора даты я создаю другой компонент, в котором размещается ngb-datepicker. Компонент ввода: 

    <div class="input-group input-group-sm">
    <ng-container [ngSwitch]="type">
      <ng-container *ngSwitchCase="'date'">        
        <app-date-picker [id]="object.id" [name]="object.id" [disabled]="disabled" (focus)="focus()" (focusout)="focusout()" [(ngModel)]="value"></app-date-picker>
      </ng-container>
<div class="input-group-append" #ref>
  <span *ngIf="unit" class="input-group-text" [ngClass]="{
    'disabled': disabled, 
    'focused': focused}">{{unit}}</span>
  <span class="input-group-text" [ngClass]="{'focused': focused}" *ngIf="!disabled && !readonly && !isValidationOff">
    <app-quality-status #qualityStatus [objects]="[object]" [hide]="hideQualityStatus"></app-quality-status>
  </span>
</div>

<div class="input-group-append" #ref>
  <ng-content></ng-content>
</div>

Компонент Datepicker: 

    <div class="input-group input-group-sm">
  <input class="form-control" name="dp" [(ngModel)]="selectedDate" ngbDatepicker #d="ngbDatepicker" (change)="onDateChange($event.target.value)" (dateSelect)="onDateSelect($event)" [disabled]="isDisabled ? 'disabled' : null">
  <div class="input-group-append">
    <button class="btn btn-input calendar fa fa-calendar" (click)="d.toggle()" type="button" [disabled]="isDisabled ? 'disabled' : null"></button>
  </div>
</div>

При использовании этого вложенного div-группы ввода в результате получается элемент управления, который не используетвсе пространство, но только половина. Если я удаляю группу ввода в компоненте datepicker, проблема в том, что моя кнопка не совпадает с текстовым полем. enter image description here

enter image description here

Как решить эту проблему?

ОБНОВЛЕНИЕ 23.10.2019

Вот мой пример стекаблика https://stackblitz.com/edit/angular-pbabtg

Ответы [ 2 ]

1 голос
/ 23 октября 2019

Попробуйте добавить следующий CSS к hello.component

:host {
  display: flex;
  flex: auto;
}
0 голосов
/ 23 октября 2019

добавил 2 вещи к <hello> компоненту

  • class = 'form-control', который необходим для input-group-append
  • style='padding:0px', так как это заполнение помещаловведите немного снаружи

релевантно app.component.html : 

<p>
    Sample for boostrap nested input-group
</p>
<div class="row form-group form-group-sm">
    <div class="col-md-12">
        simple input box - works !
    <div class="input-group input-group-sm">  
            <input type="number" class="form-control" placeholder="">
            <div class="input-group-append" #ref>
                <span class="input-group-text" >Unit</span>
                <span class="input-group-text">
          <span class="help">
            Help
          </span>
                </span>
            </div>
            <div class="input-group-append" #ref>
                <ng-content></ng-content>
            </div>
        </div>
    </div>

    <div class="col-md-12">
    Only my custom component - works !
        <hello name="{{ name }}"></hello>
    </div>

    <div class="col-md-12">
    My custom component in a input-group - fails !
<div class="input-group input-group-sm">
            <hello name="{{ name }}" class='form-control' style='padding:0px' ></hello>
            <div class="input-group-append" #ref>
                <span class="input-group-text" >Unit</span>
                <span class="input-group-text">
          <span class="help">
            Help
          </span>
                </span>
            </div>
            <div class="input-group-append" #ref>
                <ng-content></ng-content>
            </div>
        </div>
    </div>
</div>

завершено рабочий стек бликов здесь

...