标签: mat-input

我怎样才能改变高度mat-form-field与appearance="outline"？

我需要减少垫形场。

我的输入示例

我在文档中没有发现任何关于字符限制的提及。似乎是一个非常普遍的要求。

如何向此 Textarea 添加 300 个字符的限制？

https://stackblitz.com/edit/angular-izbcey?file=app/input-overview-example.ts

我怎样才能让这两个项目正确对齐？我试图让它们完美对齐，但调整按钮高度只会使底部离搜索输入的底部更远。我认为这是因为它们的中心没有对齐，所以调整高度并不是真正的正确解决方案。

这是 HTML

<!-- Search Box and Button-->
    <p>Search by company name:</p>
    <mat-form-field appearance="outline"> 
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search">
    </mat-form-field>

    <button mat-stroked-button color="primary">Search</button>

这是 SCSS：

mat-form-field.mat-form-field {
    font-size: 12px;
    width: 300px;
  }

  button.mat-stroked-button {
    font-size: 14px;
    height: 42px;
    margin: 10px;
  }

我是角度和构建示例应用程序的新手。

我遇到一种情况，我正在从角度数据表加载表单。加载时的表单具有根据数据库中的数据填充的属性。

对于表单中的其中一个字段，除了显示文本之外，我还想在控件之前放置一个图标，以在文本值之外添加视觉指示器。这不是来自 Angular Material 图标的图标，而是自定义图像。

我目前面临将自定义图标内联设置到 mat-form-field 的问题。

当我将图像包含在 mat-form-field 控件中时，我看到图标位于一行，文本字段值位于另一行。

当我在 mat-form-field 控件外部设置图像图标时，字段的标签仅位于字段值上方，并且图像图标显示在外部并且看起来很尴尬。

请找到指示问题的图像。

下图显示了当我将图像控件置于 mat-form-field 之外时出现的问题。

<div class="form-group" *ngIf="showDetailForm">
          <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

当我将图像控件放入 mat-form-field 中时，图像和字段值位于不同的行上。

<div class="form-group" *ngIf="showDetailForm">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

另外，有没有办法以左右方式而不是上下方式设置角度材料的表单字段控制的标签字段，并增加标签控件的大小。目前，标签字段对我来说看起来已经褪色了。

该控件上设置的 CSS 类具有以下代码

// This is to set the size of the input mat-form-fields.
.angularformcss {
    font-size: …

我正在将angular6与angular材料一起使用来创建这个简洁的网站。

我正在使用mat-form-fieldwith，mat-input因此显示带有文本的文本输入元素placeholder。

占位符文本位置具有两种状态。

一！当文本输入为空并且您没有专注于该元素时：

当您专注于输入文本和/或输入文本不为空时，另一个

我希望mat-input元素处于第二状态。在文本输入元素上方显示占位符，即使其中没​​有文本并且我也不关注该元素。

我知道我可以解决这个问题，并为元素的值添加某种空白空间。但是，有没有更优雅的方法来实现我所需要的？

谢谢！！！

我使用mat-form-field自定义CSS来更改外观appearance="outline"指令。

中Angular Material v 7.2.1 appearance="outline"已添加到mat-form-field选项。

如何appearance="outline"在我的应用程序中为每个输入字段声明默认值？