Skip to content

Commit ee775a8

Browse files
author
Vivian Hu
committed
feat(input): add native select to be form input
1 parent d00f6d9 commit ee775a8

File tree

12 files changed

+164
-99
lines changed

12 files changed

+164
-99
lines changed

‎package-lock.json‎

Lines changed: 133 additions & 69 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/demo-app/input/input-demo.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<form>
55
<mat-form-field class="demo-full-width">
66
<mat-label>Company (disabled)</mat-label>
7-
<input matInput disabled value="Google">
7+
<input matNativeControl disabled value="Google">
88
</mat-form-field>
99

1010
<table style="width: 100%" cellspacing="0"><tr>
@@ -28,7 +28,7 @@
2828
</mat-form-field>
2929
<mat-form-field class="demo-full-width">
3030
<mat-label>Address 2</mat-label>
31-
<textarea matInput></textarea>
31+
<textarea matNativeControl></textarea>
3232
</mat-form-field>
3333
</p>
3434
<table style="width: 100%" cellspacing="0"><tr>

‎src/demo-app/select/select-demo.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<h4>Basic</h4>
88
<mat-form-field class="demo-full-width">
99
<mat-label>Select your car</mat-label>
10-
<select matControl id="mySelectId">
10+
<select matNativeControl id="mySelectId">
1111
<option value="" disabled selected></option>
1212
<option value="volvo">Volvo</option>
1313
<option value="saab" disabled>Saab</option>
@@ -18,7 +18,7 @@ <h4>Basic</h4>
1818
<h4>Disabled and required</h4>
1919
<mat-form-field class="demo-full-width">
2020
<mat-label>Select your car (disabled)</mat-label>
21-
<select matControl disabled required>
21+
<select matNativeControl disabled required>
2222
<option value="volvo">Volvo</option>
2323
<option value="saab">Saab</option>
2424
<option value="mercedes">Mercedes</option>
@@ -28,7 +28,7 @@ <h4>Disabled and required</h4>
2828
<h4>Floating label</h4>
2929
<mat-form-field>
3030
<mat-label>Float with value</mat-label>
31-
<select matControl>
31+
<select matNativeControl>
3232
<option value="volvo">Volvo</option>
3333
<option value="saab">Saab</option>
3434
<option value="mercedes">Mercedes</option>
@@ -37,7 +37,7 @@ <h4>Floating label</h4>
3737
</mat-form-field>
3838
<mat-form-field>
3939
<mat-label>Not float when empty</mat-label>
40-
<select matControl>
40+
<select matNativeControl>
4141
<option value="" selected></option>
4242
<option value="saab">Saab</option>
4343
<option value="mercedes">Mercedes</option>
@@ -46,7 +46,7 @@ <h4>Floating label</h4>
4646
</mat-form-field>
4747
<mat-form-field>
4848
<mat-label>Float with no value, but with label</mat-label>
49-
<select matControl>
49+
<select matNativeControl>
5050
<option value="" selected label="--select one--"></option>
5151
<option value="saab">Saab</option>
5252
<option value="mercedes">Mercedes</option>
@@ -55,7 +55,7 @@ <h4>Floating label</h4>
5555
</mat-form-field>
5656
<mat-form-field>
5757
<mat-label>Float with no value, but with html</mat-label>
58-
<select matControl>
58+
<select matNativeControl>
5959
<option value="" selected>--select one--</option>
6060
<option value="saab">Saab</option>
6161
<option value="mercedes">Mercedes</option>
@@ -65,7 +65,7 @@ <h4>Floating label</h4>
6565
<h4>Looks</h4>
6666
<mat-form-field appearance="legacy">
6767
<mat-label>Legacy</mat-label>
68-
<select matControl required>
68+
<select matNativeControl required>
6969
<option value="volvo">Volvo</option>
7070
<option value="saab">Saab</option>
7171
<option value="mercedes">Mercedes</option>
@@ -74,7 +74,7 @@ <h4>Looks</h4>
7474
</mat-form-field>
7575
<mat-form-field appearance="standard">
7676
<mat-label>Standard</mat-label>
77-
<select matControl required>
77+
<select matNativeControl required>
7878
<option value="volvo">Volvo</option>
7979
<option value="saab">Saab</option>
8080
<option value="mercedes">Mercedes</option>
@@ -83,7 +83,7 @@ <h4>Looks</h4>
8383
</mat-form-field>
8484
<mat-form-field appearance="fill">
8585
<mat-label>Fill</mat-label>
86-
<select matControl required>
86+
<select matNativeControl required>
8787
<option value="volvo">Volvo</option>
8888
<option value="saab">Saab</option>
8989
<option value="mercedes">Mercedes</option>
@@ -92,7 +92,7 @@ <h4>Looks</h4>
9292
</mat-form-field>
9393
<mat-form-field appearance="outline">
9494
<mat-label>Outline</mat-label>
95-
<select matControl>
95+
<select matNativeControl>
9696
<option value="volvo">volvo</option>
9797
<option value="saab">Saab</option>
9898
<option value="mercedes">Mercedes</option>
@@ -101,7 +101,7 @@ <h4>Looks</h4>
101101
</mat-form-field>
102102
<h4>Option group</h4>
103103
<mat-form-field>
104-
<select matControl>
104+
<select matNativeControl>
105105
<optgroup label="Swedish Cars">
106106
<option value="volvo">volvo</option>
107107
<option value="saab">Saab</option>
@@ -114,7 +114,7 @@ <h4>Option group</h4>
114114
</mat-form-field>
115115
<h4>Place holder</h4>
116116
<mat-form-field class="demo-full-width">
117-
<select matControl placeholder="place holder">
117+
<select matNativeControl placeholder="place holder">
118118
<option value="" disabled selected></option>
119119
<option value="volvo">Volvo</option>
120120
<option value="saab" disabled>Saab</option>
@@ -125,7 +125,7 @@ <h4>Place holder</h4>
125125
<h4>Error message, hint, form sumbit</h4>
126126
<mat-form-field class="demo-full-width">
127127
<mat-label>Select your car (required)</mat-label>
128-
<select matControl required [formControl]="selectFormControl">
128+
<select matNativeControl required [formControl]="selectFormControl">
129129
<option label="--select something --"></option>
130130
<option value="saab">Saab</option>
131131
<option value="mercedes">Mercedes</option>
@@ -140,7 +140,7 @@ <h4>Error message, hint, form sumbit</h4>
140140
<h4>Error message with errorStateMatcher</h4>
141141
<mat-form-field class="demo-full-width">
142142
<mat-label>Select your car</mat-label>
143-
<select matControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
143+
<select matNativeControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
144144
<option label="--select something --"></option>
145145
<option value="saab">Saab</option>
146146
<option value="mercedes">Mercedes</option>

‎src/lib/input/input.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1320,7 +1320,7 @@ function createComponent<T>(component: Type<T>,
13201320
@Component({
13211321
template: `
13221322
<mat-form-field>
1323-
<input matInput id="test-id" placeholder="test">
1323+
<input matNativeControl id="test-id" placeholder="test">
13241324
</mat-form-field>`
13251325
})
13261326
class MatInputWithId {}
@@ -1527,7 +1527,7 @@ class MatInputWithDynamicLabel {
15271527
@Component({
15281528
template: `
15291529
<mat-form-field>
1530-
<textarea matInput [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></textarea>
1530+
<textarea matNativeControl [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></textarea>
15311531
</mat-form-field>`
15321532
})
15331533
class MatInputTextareaWithBindings {
@@ -1743,7 +1743,7 @@ class AutosizeTextareaInAStep {}
17431743
@Component({
17441744
template: `
17451745
<mat-form-field>
1746-
<select matInput id="test-id" [disabled]="disabled" [required]="required">
1746+
<select matNativeControl id="test-id" [disabled]="disabled" [required]="required">
17471747
<option value="volvo">Volvo</option>
17481748
<option value="saab">Saab</option>
17491749
<option value="mercedes">Mercedes</option>
@@ -1759,7 +1759,7 @@ class MatInputSelect {
17591759
@Component({
17601760
template: `
17611761
<mat-form-field>
1762-
<select matInput>
1762+
<select matNativeControl>
17631763
<option value="" disabled selected></option>
17641764
<option value="saab">Saab</option>
17651765
<option value="mercedes">Mercedes</option>
@@ -1772,7 +1772,7 @@ class MatInputSelectWithNoLabelNoValue {}
17721772
@Component({
17731773
template: `
17741774
<mat-form-field>
1775-
<select matInput>
1775+
<select matNativeControl>
17761776
<option value="" label="select a car"></option>
17771777
<option value="saab">Saab</option>
17781778
<option value="mercedes">Mercedes</option>
@@ -1785,7 +1785,7 @@ class MatInputSelectWithLabel {}
17851785
@Component({
17861786
template: `
17871787
<mat-form-field>
1788-
<select matInput>
1788+
<select matNativeControl>
17891789
<option value="">select a car</option>
17901790
<option value="saab">Saab</option>
17911791
<option value="mercedes">Mercedes</option>

‎src/lib/input/input.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
5858

5959
/** Directive that allows a native input to work inside a `MatFormField`. */
6060
@Directive({
61-
selector: `input[matInput], textarea[matInput], select[matControl]`,
61+
selector: `input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl],
62+
textarea[matNativeControl]`,
6263
exportAs: 'matInput',
6364
host: {
6465
/**

‎src/material-examples/select-disabled/select-disabled-example.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
1313

1414
<h4>native html select</h4>
1515
<mat-form-field>
16-
<select matControl placeholder="Choose an option" [disabled]="disableSelect.value">
16+
<select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
1717
<option value="" disabled selected></option>
1818
<option value="volvo">Volvo</option>
1919
<option value="saab" disabled>Saab</option>

‎src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h4>mat-select</h4>
1414

1515
<h4>native html select</h4>
1616
<mat-form-field class="demo-full-width">
17-
<select matControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
17+
<select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
1818
<option value=""></option>
1919
<option value="valid" selected>Valid option</option>
2020
<option value="invalid">Invalid option</option>

‎src/material-examples/select-form/select-form-example.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h4>mat-select</h4>
1010
<p> Selected food: {{selectedValue}} </p>
1111
<h4>native html select</h4>
1212
<mat-form-field>
13-
<select matControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
13+
<select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
1414
<option value="" disabled selected></option>
1515
<option *ngFor="let car of cars" [value]="car.value">
1616
{{car.viewValue}}

‎src/material-examples/select-hint-error/select-hint-error-example.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h4>mat select</h4>
1313
<h4>native html select</h4>
1414
<mat-form-field>
1515
<mat-label>Select your car (required)</mat-label>
16-
<select matControl required [formControl]="selectFormControl">
16+
<select matNativeControl required [formControl]="selectFormControl">
1717
<option label="--select something --"></option>
1818
<option value="saab">Saab</option>
1919
<option value="mercedes">Mercedes</option>

‎src/material-examples/select-optgroup/select-optgroup-example.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
1313

1414
<h4>native html select</h4>
1515
<mat-form-field>
16-
<select matControl>
16+
<select matNativeControl>
1717
<optgroup label="Swedish Cars">
1818
<option value="volvo">volvo</option>
1919
<option value="saab">Saab</option>

0 commit comments

Comments
 (0)