如何使用 angular material 表单域和弹性布局

Question

我想在一行中有 2 个表单输入字段： 1.第一个有一个固定的， 1.第二个应该会变长变小，但是这个不会变小到180px以下。

当您启动应用程序时，我们会看到这个

可能还有其他问题:
我认为第二个输入字段应该已经显示提示文本和水平线 - 但它只会在获得焦点时显示。
这是预期的行为还是我遗漏了什么？

无论如何。主要问题是 第二个字段没有按预期收缩 。不会缩小到180px以下:

在 chrome 开发工具中，我可以看到 input 元素用 div class="mat-form-field-infix"> 包裹，而 class mat-form-field-infix 有一个固定的宽度为 180px!

我想到的唯一 解决方法 是使用 ::ng-deep.[=45= 覆盖此宽度] 您可以在 Stackblitz 示例的 co-input-field.component.scss 文件中激活它

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

使用此解决方法，第二个输入按预期缩小：

但是::ng-deep is deprecated并且会被删除。
那么使输入按预期收缩的正确方法是什么？

Answer 1

由于 .mat-form-field-infix 的宽度固定为 180px，因此无法使表单字段缩小到 180px 以上。不可避免地。mat-form-field-infix 必须被覆盖。

您可以通过几种方式使用 ::ng-deep 获得相同的结果；

1.disable 查看该特定组件的封装。但是，这种方法有一个很大的缺点，即组件中的所有样式都是全局的，因此需要谨慎管理。

@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.don不禁用视图封装。在全局样式中使用父组件的元素选择器。

将以下内容放入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.don不禁用视图封装。为这种特殊情况定义一个全局规则。

将以下内容放入styles.scss

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

并将.shrinking-mat-form-field class应用到相应的元素

<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>

尽管第二种和第三种方法基本相同，但我个人更喜欢第三种方法，因为它可读性强，在整个项目中保持一致，副作用最小，并且可以从一个点进行管理。

如何使用 angular material 表单域和弹性布局

how to use angular material form field and flex-layout

angular-flex-layout

angular-material-7