как использовать поле формы углового материала и flex-layout

Question

Я хочу, чтобы в одной строке было 2 поля ввода формы: 1. первый имеет фиксированный с, 1. вторая должна расти и уменьшаться, но она не уменьшается ниже 180px.

Вот полный пример блиц-стека

Когда вы запускаете приложение, мы видим это

Там может быть, другая проблема :
Я думаю, что во 2-м поле ввода уже должен отображаться текст подсказки и горизонтальная линия - но он будет отображаться только тогда, когда он получит фокус.
Это ожидаемое поведение или я что-то упустил?

Во всяком случае. Основная проблема заключается в том, что 2-е поле не сжимается , как ожидалось. Он не будет уменьшаться ниже 180px:

В chrome dev-tool я вижу, что элемент input обернут в div class="mat-form-field-infix">, а класс mat-form-field-infix имеет фиксированную ширину 180px!

Единственный обходной путь , который я придумал, - переопределить эту ширину с помощью ::ng-deep.
Вы можете активировать это в файле co-input-field.component.scss примера Stackblitz

:host ::ng-deep .mat-form-field-infix {
  // width: auto !important;
  width: unset !important;
}

С этим обходным решением второй вход сжимается, как и ожидалось:

Но :: ng-deep устарела и будет удалена.
Итак, Каков правильный способ уменьшить ввод данных, как ожидалось?

Answer 1

, поскольку .mat-form-field-infix имеет фиксированную ширину 180px, нет способа уменьшить размер поля формы до 180px.неизбежно .mat-form-field-infix должен быть переопределен.

вы можете получить тот же результат с помощью :: ng-deep двумя способами;

1.отключить инкапсуляцию представления для этогоконкретный компонент.Однако у этого подхода есть огромный недостаток, заключающийся в том, что все стили в вашем компоненте становятся глобальными, поэтому их необходимо тщательно контролировать.

@Component({
    selector: 'app-co-input-field',
    templateUrl: './co-input-field.component.html',
    styleUrls: ['./co-input-field.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class CoInputFieldComponent {}

, а затем в co-input-field.component.scss вы делаете следующее

app-co-input-field {
    .mat-form-field-infix {
      width: auto !important;
    }
    // all other component styles goes in here
    // in order to keep them isolated from global scope
}

2.не отключать инкапсуляцию вида.используйте селектор элемента родительского компонента в глобальных стилях.

вставьте следующее в styles.scss

app-co-input-field {
    .mat-form-field-infix {
      width: auto !important;
    }
    // co-input-field.component.scss still can be used for encapsulated styles
}

3. не отключайте инкапсуляцию вида.определите глобальное правило для этой конкретной ситуации.

поместите следующее в styles.scss

.shrinking-mat-form-field {
    .mat-form-field-infix {
      width: auto !important;
    }
}

и примените класс .shrinking-mat-form-field к соответствующему элементу

<mat-form-field style="width: 100%" class="shrinking-mat-form-field">
  <input matInput placeholder="placeholder"  />
  <mat-hint align="end">hint text</mat-hint>
</mat-form-field>

Хотя второй и третий подходы в основном совпадают, я лично предпочитаю третий подход, чтобы сделать его читаемым, обеспечить его согласованность с проектом, иметь минимальные побочные эффекты и управлять ими из одной точки.