移除 mat-form-field 输入框的下划线效果

huangapple
go评论114阅读模式
英文:

Remove the underline effect from mat-form-field input

问题

我有一个使用Angular Material 14的input，当我点击输入时，默认会出现下划线。如何移除这个下划线？

  1. <div class="filter-search">
  2.   <mat-form-field appearance="legacy" class="filter-search-item">
  3.     <input type="search" matInput />
  4.   </mat-form-field>
  5.   <mat-icon matPrefix class="my-icon">search</mat-icon>
  6. </div>

我尝试使用appearance="none"，但会出现错误Type '&quot;none&quot;' is not assignable to type 'MatFormFieldAppearance'.

此外，我还尝试使用CSS的::ng-deep，但也不起作用。查看浏览器的检查器，似乎应该可以这样工作，因为它看起来就是这样的，但实际上并不起作用。

  1. .filter-search-item .mat-form-field-appearance-legacy .mat-form-field-underline {
  2.   height: 0px !important;
  3.   display: none !important;
  4. }
英文:

I have an input using Angular Material 14 and I get an underline by default when I click on the input. How can I remove this underline?

  1.   &lt;div class=&quot;filter-search&quot;&gt;
  2.      &lt;mat-form-field appearance=&quot;legacy&quot; class=&quot;filter-search-item&quot;&gt;
  3.         &lt;input type=&quot;search&quot; matInput /&gt;
  4.       &lt;/mat-form-field&gt;
  5.       &lt;mat-icon matPrefix class=&quot;my-icon&quot;&gt;search&lt;/mat-icon&gt;
  6.   &lt;/div&gt;

I have tried to use appearance="none" but it gives error Type &#39;&quot;none&quot;&#39; is not assignable to type &#39;MatFormFieldAppearance&#39;.

Also using css I have used ::ng-deep but it doesn't work either. And looking in the browser's inspector this way it should work, since it is how it appears, but it doesn't work either.

  1. .filter-search-item .mat-form-field-appearance-legacy .mat-form-field-underline {
  2.   height: 0px !important;
  3.   display: none !important;
  4. }

答案1

得分: 0

问题

这是因为类型MatFormFieldAppearance的唯一两种可能的外观样式是fill和outline。

移除 mat-form-field 输入框的下划线效果

如果你写下以下代码：

  1. <mat-form-field appearance="none">
  2.   <mat-label>Input</mat-label>
  3.   <input matInput />
  4. </mat-form-field>

你将会得到以下错误：

  1. error TS2322: Type '"none"' is not assignable to type 'MatFormFieldAppearance'.

为什么会出现这个错误？如果你查看tsconfig.json，你会发现strictTemplates默认设置为true。

  1. /* 要了解有关此文件的更多信息，请参阅：https://angular.io/config/tsconfig。 */
  2. {
  3.   "compileOnSave": false,
  4.   "compilerOptions": {
  5.     "baseUrl": "./",
  6.     "outDir": "./dist/out-tsc",
  7.     "sourceMap": true,
  8.     "declaration": false,
  9.     "downlevelIteration": true,
  10.     "experimentalDecorators": true,
  11.     "moduleResolution": "node",
  12.     "importHelpers": true,
  13.     "target": "es2017",
  14.     "module": "es2020",
  15.     "lib": ["es2020", "dom"],
  16.     "noUnusedParameters": false,
  17.     "noUnusedLocals": false,
  18.     "strictNullChecks": true,
  19.     "noImplicitReturns": true,
  20.     "strictFunctionTypes": true,
  21.     "noImplicitOverride": true,
  22.     "noFallthroughCasesInSwitch": true,
  23.     "noImplicitAny": true,
  24.     "noImplicitThis": true,
  25.     "strictBindCallApply": true,
  26.     "esModuleInterop": true
  27.   },
  28.   "angularCompilerOptions": {
  29.     "enableI18nLegacyMessageIdFormat": false,
  30.     "strictInjectionParameters": true,
  31.     "strictInputAccessModifiers": true,
  32.     "strictTemplates": true /* <-- 这是导致错误的原因 */
  33.   }
  34. }

解决方法

将以下CSS添加到你的组件CSS中：

form-field-overview-example.css

  1. ::ng-deep .mat-form-field-underline {
  2.   display: none;
  3. }

查看实时演示。

注意：上面的代码将影响此组件内所有的mat-form-field元素。如果你只想针对此组件内的特定mat-form-field元素进行操作，你需要添加一个自定义类。

form-field-overview-example.html

  1. <mat-form-field appearance="fill" class="custom-class">
  2.   <mat-label>Input</mat-label>
  3.   <input matInput />
  4. </mat-form-field>

form-field-overview-example.css

  1. ::ng-deep .custom-class .mat-form-field-underline {
  2.   display: none;
  3. }
英文:

Problem

This is expected because the only two possible appearance styles for the type MatFormFieldAppearance are fill and outline.

移除 mat-form-field 输入框的下划线效果

If you write the following code:

  1. &lt;mat-form-field appearance=&quot;none&quot;&gt;
  2.   &lt;mat-label&gt;Input&lt;/mat-label&gt;
  3.   &lt;input matInput /&gt;
  4. &lt;/mat-form-field&gt;

You'll get the following error:

  1. error TS2322: Type &#39;&quot;none&quot;&#39; is not assignable to type &#39;MatFormFieldAppearance&#39;.

Why do you get this error? If you look at tsconfig.json, you'll see that strictTemplates is set to true by default.

  1. /* To learn more about this file see: https://angular.io/config/tsconfig. */
  2. {
  3.   &quot;compileOnSave&quot;: false,
  4.   &quot;compilerOptions&quot;: {
  5.     &quot;baseUrl&quot;: &quot;./&quot;,
  6.     &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
  7.     &quot;sourceMap&quot;: true,
  8.     &quot;declaration&quot;: false,
  9.     &quot;downlevelIteration&quot;: true,
  10.     &quot;experimentalDecorators&quot;: true,
  11.     &quot;moduleResolution&quot;: &quot;node&quot;,
  12.     &quot;importHelpers&quot;: true,
  13.     &quot;target&quot;: &quot;es2017&quot;,
  14.     &quot;module&quot;: &quot;es2020&quot;,
  15.     &quot;lib&quot;: [&quot;es2020&quot;, &quot;dom&quot;],
  16.     &quot;noUnusedParameters&quot;: false,
  17.     &quot;noUnusedLocals&quot;: false,
  18.     &quot;strictNullChecks&quot;: true,
  19.     &quot;noImplicitReturns&quot;: true,
  20.     &quot;strictFunctionTypes&quot;: true,
  21.     &quot;noImplicitOverride&quot;: true,
  22.     &quot;noFallthroughCasesInSwitch&quot;: true,
  23.     &quot;noImplicitAny&quot;: true,
  24.     &quot;noImplicitThis&quot;: true,
  25.     &quot;strictBindCallApply&quot;: true,
  26.     &quot;esModuleInterop&quot;: true
  27.   },
  28.   &quot;angularCompilerOptions&quot;: {
  29.     &quot;enableI18nLegacyMessageIdFormat&quot;: false,
  30.     &quot;strictInjectionParameters&quot;: true,
  31.     &quot;strictInputAccessModifiers&quot;: true,
  32.     &quot;strictTemplates&quot;: true /* &lt;-- This causes the error */
  33.   }
  34. }

Solution

Add the following CSS to your component CSS:

form-field-overview-example.css

  1. ::ng-deep .mat-form-field-underline {
  2.   display: none;
  3. }

See the live demo.

Note: The code above will affect all mat-form-field elements inside this component. If you want to target only specific mat-form-field elements inside this component, you need to add a custom class.

form-field-overview-example.html

  1. &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;custom-class&quot;&gt;
  2.   &lt;mat-label&gt;Input&lt;/mat-label&gt;
  3.   &lt;input matInput /&gt;
  4. &lt;/mat-form-field&gt;

form-field-overview-example.css

  1. ::ng-deep .custom-class .mat-form-field-underline {
  2.   display: none;
  3. }

huangapple
  • 本文由 发表于 2023年7月17日 19:04:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/76703820.html
  • angular
  • angular-material
  • input
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定