Skip to content

Commit 777c2e9

Browse files
fmalcherfmalcher
committed
feat: rename input [field] to [fieldRef] 
1 parent fd2a9dc commit 777c2e9

File tree

6 files changed

+31
-30
lines changed

6 files changed

+31
-30
lines changed

‎src/app/form-error/form-error.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@let state = field()(); @if (state.touched() && state.errors().length) {
1+
@let state = fieldRef()();
2+
@if (state.touched() && state.errors().length) {
23
<ul>
34
@for (error of state.errors(); track $index) {
45
<li>{{ error.message }}</li>

‎src/app/form-error/form-error.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ import { FieldTree } from '@angular/forms/signals';
88
styleUrl: './form-error.scss',
99
})
1010
export class FormError<T> {
11-
readonly field = input.required<FieldTree<T>>();
11+
readonly fieldRef = input.required<FieldTree<T>>();
1212
}

‎src/app/identity-form/identity-form.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
<label
1818
>Salutation
1919
<input type="text" placeholder="e. g. Mx." [field]="identity().salutation" />
20-
<app-form-error [field]="identity().salutation" />
20+
<app-form-error [fieldRef]="identity().salutation" />
2121
</label>
2222
} @if (!identity().pronoun().hidden()) {
2323
<label
2424
>Pronoun
2525
<input type="text" placeholder="e. g. they/them" [field]="identity().pronoun" />
26-
<app-form-error [field]="identity().pronoun" />
26+
<app-form-error [fieldRef]="identity().pronoun" />
2727
</label>
2828
}
2929
</div>

‎src/app/registration-form-1/registration-form-1.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
99
[field]="registrationForm.username"
1010
[ariaInvalid]="ariaInvalidState(registrationForm.username())"
1111
/>
12-
<app-form-error [field]="registrationForm.username" />
12+
<app-form-error [fieldRef]="registrationForm.username" />
1313
</label>
1414

1515
<!-- native HTML inputs bound with the [field] directive -->
@@ -21,7 +21,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
2121
[field]="registrationForm.age"
2222
[ariaInvalid]="ariaInvalidState(registrationForm.age())"
2323
/>
24-
<app-form-error [field]="registrationForm.age" />
24+
<app-form-error [fieldRef]="registrationForm.age" />
2525
</label>
2626
</div>
2727
<fieldset>
@@ -41,11 +41,11 @@ <h1>Version 1: Getting Started with the Basics</h1>
4141
/>
4242
<button type="button" (click)="removeEmail($index)">-</button>
4343
</div>
44-
<app-form-error [field]="emailField" />
44+
<app-form-error [fieldRef]="emailField" />
4545
</div>
4646
}
4747
</div>
48-
<app-form-error [field]="registrationForm.email" />
48+
<app-form-error [fieldRef]="registrationForm.email" />
4949
</fieldset>
5050
<label
5151
>Subscribe to Newsletter?
@@ -59,9 +59,9 @@ <h1>Version 1: Getting Started with the Basics</h1>
5959
[field]="registrationForm.agreeToTermsAndConditions"
6060
/>
6161
</label>
62-
<app-form-error [field]="registrationForm.agreeToTermsAndConditions" />
62+
<app-form-error [fieldRef]="registrationForm.agreeToTermsAndConditions" />
6363
<hr />
64-
<app-form-error [field]="registrationForm" />
64+
<app-form-error [fieldRef]="registrationForm" />
6565
<div role="group">
6666
<button
6767
type="submit"

‎src/app/registration-form-2/registration-form-2.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
1717
@if (registrationForm.username().pending()) {
1818
<small>Checking availability ...</small>
1919
}
20-
<app-form-error [field]="registrationForm.username" />
20+
<app-form-error [fieldRef]="registrationForm.username" />
2121
</label>
2222

2323
<!-- native HTML inputs bound with the [field] directive -->
@@ -29,7 +29,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
2929
[field]="registrationForm.age"
3030
[ariaInvalid]="ariaInvalidState(registrationForm.age)"
3131
/>
32-
<app-form-error [field]="registrationForm.age" />
32+
<app-form-error [fieldRef]="registrationForm.age" />
3333
</label>
3434
</div>
3535

@@ -42,7 +42,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
4242
[field]="registrationForm.password.pw1"
4343
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
4444
/>
45-
<app-form-error [field]="registrationForm.password.pw1" />
45+
<app-form-error [fieldRef]="registrationForm.password.pw1" />
4646
</label>
4747
<label
4848
>Password Confirmation
@@ -52,9 +52,9 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
5252
[field]="registrationForm.password.pw2"
5353
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
5454
/>
55-
<app-form-error [field]="registrationForm.password.pw2" />
55+
<app-form-error [fieldRef]="registrationForm.password.pw2" />
5656
</label>
57-
<app-form-error [field]="registrationForm.password" />
57+
<app-form-error [fieldRef]="registrationForm.password" />
5858
</div>
5959
<fieldset>
6060
<legend>
@@ -73,11 +73,11 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
7373
/>
7474
<button type="button" (click)="removeEmail($index)">-</button>
7575
</div>
76-
<app-form-error [field]="emailField" />
76+
<app-form-error [fieldRef]="emailField" />
7777
</div>
7878
}
7979
</div>
80-
<app-form-error [field]="registrationForm.email" />
80+
<app-form-error [fieldRef]="registrationForm.email" />
8181
</fieldset>
8282
<label
8383
>Subscribe to Newsletter?
@@ -92,7 +92,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
9292
<option value="Vue">Vue</option>
9393
<option value="React">React</option>
9494
</select>
95-
<app-form-error [field]="registrationForm.newsletterTopics" />
95+
<app-form-error [fieldRef]="registrationForm.newsletterTopics" />
9696
</label>
9797

9898
<label
@@ -103,9 +103,9 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
103103
[field]="registrationForm.agreeToTermsAndConditions"
104104
/>
105105
</label>
106-
<app-form-error [field]="registrationForm.agreeToTermsAndConditions" />
106+
<app-form-error [fieldRef]="registrationForm.agreeToTermsAndConditions" />
107107
<hr />
108-
<app-form-error [field]="registrationForm" />
108+
<app-form-error [fieldRef]="registrationForm" />
109109
<div role="group">
110110
<button
111111
type="submit"

‎src/app/registration-form-3/registration-form-3.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
1717
@if (registrationForm.username().pending()) {
1818
<small>Checking availability ...</small>
1919
}
20-
<app-form-error [field]="registrationForm.username" />
20+
<app-form-error [fieldRef]="registrationForm.username" />
2121
</label>
2222

2323
<!-- A whole child form with own model -->
@@ -32,7 +32,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
3232
[field]="registrationForm.age"
3333
[ariaInvalid]="ariaInvalidState(registrationForm.age)"
3434
/>
35-
<app-form-error [field]="registrationForm.age" />
35+
<app-form-error [fieldRef]="registrationForm.age" />
3636
</label>
3737
</div>
3838

@@ -45,7 +45,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
4545
[field]="registrationForm.password.pw1"
4646
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
4747
/>
48-
<app-form-error [field]="registrationForm.password.pw1" />
48+
<app-form-error [fieldRef]="registrationForm.password.pw1" />
4949
</label>
5050
<label
5151
>Password Confirmation
@@ -55,9 +55,9 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
5555
[field]="registrationForm.password.pw2"
5656
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
5757
/>
58-
<app-form-error [field]="registrationForm.password.pw2" />
58+
<app-form-error [fieldRef]="registrationForm.password.pw2" />
5959
</label>
60-
<app-form-error [field]="registrationForm.password" />
60+
<app-form-error [fieldRef]="registrationForm.password" />
6161
</div>
6262
<fieldset>
6363
<legend>
@@ -76,11 +76,11 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
7676
/>
7777
<button type="button" (click)="removeEmail($index)">-</button>
7878
</div>
79-
<app-form-error [field]="emailField" />
79+
<app-form-error [fieldRef]="emailField" />
8080
</div>
8181
}
8282
</div>
83-
<app-form-error [field]="registrationForm.email" />
83+
<app-form-error [fieldRef]="registrationForm.email" />
8484
</fieldset>
8585
<label
8686
>Subscribe to Newsletter?
@@ -90,7 +90,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
9090
[field]="registrationForm.newsletterTopics"
9191
label="Topics (multiple possible):"
9292
/>
93-
<app-form-error [field]="registrationForm.newsletterTopics" />
93+
<app-form-error [fieldRef]="registrationForm.newsletterTopics" />
9494
<label
9595
>I agree to the terms and conditions
9696
<input
@@ -99,9 +99,9 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
9999
[field]="registrationForm.agreeToTermsAndConditions"
100100
/>
101101
</label>
102-
<app-form-error [field]="registrationForm.agreeToTermsAndConditions" />
102+
<app-form-error [fieldRef]="registrationForm.agreeToTermsAndConditions" />
103103
<hr />
104-
<app-form-error [field]="registrationForm" />
104+
<app-form-error [fieldRef]="registrationForm" />
105105
<div role="group">
106106
<button
107107
type="submit"

0 commit comments

Comments
 (0)