Skip to content

Commit 906f8cd

Browse files
authored
docs(material/form-field): remove font size example (#26129)
We don't support having the form field inherit the font size with the MDC version. These changes remove the example from the docs. Fixes #26091.
1 parent c1a90c4 commit 906f8cd

File tree

3 files changed

+10
-37
lines changed

3 files changed

+10
-37
lines changed
Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
1-
<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
2-
<mat-form-field appearance="fill" [color]="options.value.color">
3-
<mat-label>Color</mat-label>
4-
<mat-select formControlName="color">
5-
<mat-option value="primary">Primary</mat-option>
6-
<mat-option value="accent">Accent</mat-option>
7-
<mat-option value="warn">Warn</mat-option>
8-
</mat-select>
9-
</mat-form-field>
10-
11-
<mat-form-field appearance="fill" [color]="options.value.color">
12-
<mat-label>Font size</mat-label>
13-
<input matInput type="number" placeholder="Ex. 12" formControlName="fontSize" min="10">
14-
<span matTextSuffix>px</span>
15-
<mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
16-
</mat-form-field>
17-
</form>
1+
<mat-form-field appearance="fill" [color]="colorControl.value!">
2+
<mat-label>Color</mat-label>
3+
<mat-select [formControl]="colorControl">
4+
<mat-option value="primary">Primary</mat-option>
5+
<mat-option value="accent">Accent</mat-option>
6+
<mat-option value="warn">Warn</mat-option>
7+
</mat-select>
8+
</mat-form-field>
Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {NonNullableFormBuilder, Validators} from '@angular/forms';
2+
import {FormControl} from '@angular/forms';
33
import {ThemePalette} from '@angular/material/core';
44

55
/** @title Form field theming */
@@ -9,14 +9,5 @@ import {ThemePalette} from '@angular/material/core';
99
styleUrls: ['form-field-theming-example.css'],
1010
})
1111
export class FormFieldThemingExample {
12-
options = this._formBuilder.group({
13-
color: this._formBuilder.control('primary' as ThemePalette),
14-
fontSize: this._formBuilder.control(16, Validators.min(10)),
15-
});
16-
17-
constructor(private _formBuilder: NonNullableFormBuilder) {}
18-
19-
getFontSize() {
20-
return Math.max(10, this.options.value.fontSize || 0);
21-
}
12+
colorControl = new FormControl('primary' as ThemePalette);
2213
}

src/material/form-field/form-field.md

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -119,15 +119,6 @@ information on this see the guide on
119119
will set the color of the form field underline and floating label based on the theme colors
120120
of your app.
121121

122-
`<mat-form-field>` inherits its `font-size` from its parent element. This can be overridden to an
123-
explicit size using CSS. We recommend a specificity of at least 1 element + 1 class.
124-
125-
```css
126-
mat-form-field.mat-form-field {
127-
font-size: 16px;
128-
}
129-
```
130-
131122
<!-- example(form-field-theming) -->
132123

133124
### Accessibility

0 commit comments

Comments
 (0)