File tree Expand file tree Collapse file tree 3 files changed +10
-37
lines changed
components-examples/material/form-field/form-field-theming Expand file tree Collapse file tree 3 files changed +10
-37
lines changed Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 11import { Component } from '@angular/core' ;
2- import { NonNullableFormBuilder , Validators } from '@angular/forms' ;
2+ import { FormControl } from '@angular/forms' ;
33import { 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} )
1111export 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}
Original file line number Diff line number Diff line change @@ -119,15 +119,6 @@ information on this see the guide on
119119will set the color of the form field underline and floating label based on the theme colors
120120of 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
You can’t perform that action at this time.
0 commit comments