标签: mat-form-field

这是我为单页 Web 应用程序编写的简单 HTML

<div class="bg">
    <h1 class="faq_heading">Frequently Asked Questions</h1>
    <div class="search">
        <mat-form-field class="search_input">
            <input type="text" placeholder="Search" class="search_input" matInput [(ngModel)]="inp" (keyup)="onKey($event)" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Categories</mat-label>
            <mat-select class="dropdown" placeholder="Categories">
                <mat-option value="Default">Default</mat-option>
            </mat-select>
        </mat-form-field>
        <img src="../assets/images/search.svg" alt="" class="search_img" />
    </div>
</div>

component.ts 文件中没有太多内容，只有基本模板和所需的导入语句

以下是app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MatFormFieldModule } from "@angular/material/form-field";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MatGridListModule } from "@angular/material/grid-list";
import { …

看起来边框颜色mat-form-field已经更新了

• v15是黑色的
• v12是灰色的

是否可以添加一个选项来更改基础颜色？

当我将鼠标移到mat-form-field.

为了能够使用彩色垫卡，我加了一些CSS类style.scss来改变background-color的mat-form-field。

.mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white!important; }
mat-form-field mat-label { background-color: rgba(255, 255, 255, 0.9); }

它工作正常，但是当我将鼠标悬停在 a 上时mat-form-field，背景会在几分之一秒内变成红色。不幸的是，我找不到允许我删除此透明度的 CSS 类。

StackBlitz： 这里

我目前正在尝试编写一个全局日期选择器。为此，我创建了一个从角度观察给定示例的组件（https://material.angular.io/guide/creating-a-custom-form-field-control）。我只想外包整个 mat-form-field 的一部分，所以这就是我正在做的事情：

应用程序组件.html：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <my-date-picker formControlName="birthday"></my-date-picker>
  </mat-form-field>

我的日期选择器.component.html：

<input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
  (ngModelChange)="modelChanged($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

（我认为 .ts 对我的问题不重要）

但现在看起来像这样：

如果我将其像这样包装在 app.component.html 中，也会发生这种情况：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <div>
      <input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
      (ngModelChange)="modelChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </div>
  </mat-form-field>

因为这样它将 matSuffix 呈现为 mat-infix 的一部分。所以看来 matSuffix 没有被正确识别。

虽然它会像这样渲染而不需要额外的包装器（div）：

推杆：

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

在 app.component.html 中不是一个选项。我尝试了这个，但这只会导致其他错误，这些错误比 css 错误更糟糕。

更新到 Angular Material v15 后，我们的表单字段看起来像这样（有时 - 取决于上面的元素是否有边距/填充）：

这是以前的样子：

据我所见（以及他们在文档中所写的内容），他们更改了边距。比较（新版本）：

与以前的版本相比：

另外，为了证明它不仅存在于我们的应用程序中，我还准备了一个 stackblitz 示例来显示此行为，请参阅：Stackblitz 示例

padding-top: 8px我通过向所有s添加 a 修复了标签被“切断”的问题mat-form-field。然而，这感觉像是一种解决方法。对此有更好的解决方案吗？

我正在使用反应形式和角度材料垫选择来创建一个形式，并启用多重选择。我有一个要在垫选择中加载的对象列表，并且希望默认情况下预先选择该列表中的某些项目。

默认选择与字符串（下面的示例中的苏打水）配合良好，并且默认项目显示为选中图标，垫选择元素值已加载它们，如果我添加更多项目，它们将添加到值字段中的现有项目中。

但我想要在垫选择中加载的项目是对象（下面示例中的 energyDrinks），当我设置垫选择字段的值时，即使字段值设置正确，默认情况下也不会检查它们。另外，如果我添加一个项目，值字段中的现有数据将被新项目覆盖。

有什么方法可以让预选项目在 UI 选择框中选中，并让新添加的项目添加 mat-select 元素的现有值？

提前致谢

下面是示例代码 -

html-

<form [formGroup]="drinkCategory">

<mat-form-field class="full-width">
    <mat-select multiple formControlName="sodaName">
        <mat-option *ngFor="let soda of sodaList" [value]="soda">
            {{soda}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('sodaName').value | json}}</p>


<mat-form-field class="full-width">
    <mat-select multiple formControlName="energyDrinkName">
        <mat-option *ngFor="let energyDrink of energyDrinksList" [value]="energyDrink">
            {{energyDrink.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('energyDrinkName').value | json}}</p>
</form>

.ts 文件 -

import { Component , ViewChild} from '@angular/core';
import { FormBuilder, FormGroup,FormControl,Validators } from '@angular/forms';

@Component({
  selector: 'drink-example',
  styleUrls: ['drink-example.css'],
  templateUrl: 'drink-example.html',
})
export class DrinkExample …