Skip to content

Commit fd2a9dc

Browse files
fmalcherfmalcher
committed
ng update 21.0.0-next.8 / rename [control] => [field] 
1 parent 5642a60 commit fd2a9dc

File tree

11 files changed

+386
-384
lines changed

11 files changed

+386
-384
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,20 @@
2323
},
2424
"private": true,
2525
"dependencies": {
26-
"@angular/common": "^21.0.0-next.7",
27-
"@angular/compiler": "^21.0.0-next.7",
28-
"@angular/core": "^21.0.0-next.7",
29-
"@angular/forms": "^21.0.0-next.7",
30-
"@angular/platform-browser": "^21.0.0-next.7",
31-
"@angular/router": "^21.0.0-next.7",
26+
"@angular/common": "^21.0.0-next.8",
27+
"@angular/compiler": "^21.0.0-next.8",
28+
"@angular/core": "^21.0.0-next.8",
29+
"@angular/forms": "^21.0.0-next.8",
30+
"@angular/platform-browser": "^21.0.0-next.8",
31+
"@angular/router": "^21.0.0-next.8",
3232
"@picocss/pico": "^2.1.1",
3333
"rxjs": "~7.8.0",
3434
"tslib": "^2.3.0"
3535
},
3636
"devDependencies": {
37-
"@angular/build": "^21.0.0-next.7",
38-
"@angular/cli": "^21.0.0-next.7",
39-
"@angular/compiler-cli": "^21.0.0-next.7",
37+
"@angular/build": "^21.0.0-next.8",
38+
"@angular/cli": "^21.0.0-next.8",
39+
"@angular/compiler-cli": "^21.0.0-next.8",
4040
"@types/jasmine": "~5.1.0",
4141
"jasmine-core": "~5.10.0",
4242
"karma": "~6.4.0",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
>Gender
33
<select
44
name="gender-identity"
5-
[control]="identity().gender"
5+
[field]="identity().gender"
66
(change)="maybeUpdateSalutationAndPronoun($event)"
77
>
88
<option value="" selected>Please select</option>
@@ -16,13 +16,13 @@
1616
@if (!identity().salutation().hidden()) {
1717
<label
1818
>Salutation
19-
<input type="text" placeholder="e. g. Mx." [control]="identity().salutation" />
19+
<input type="text" placeholder="e. g. Mx." [field]="identity().salutation" />
2020
<app-form-error [field]="identity().salutation" />
2121
</label>
2222
} @if (!identity().pronoun().hidden()) {
2323
<label
2424
>Pronoun
25-
<input type="text" placeholder="e. g. they/them" [control]="identity().pronoun" />
25+
<input type="text" placeholder="e. g. they/them" [field]="identity().pronoun" />
2626
<app-form-error [field]="identity().pronoun" />
2727
</label>
2828
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, model } from '@angular/core';
2-
import { Control, FieldTree, hidden, required, schema } from '@angular/forms/signals';
2+
import { Field, FieldTree, hidden, required, schema } from '@angular/forms/signals';
33
import { FormError } from '../form-error/form-error';
44

55
export interface GenderIdentity {
@@ -34,7 +34,7 @@ export const identitySchema = schema<GenderIdentity>((path) => {
3434

3535
@Component({
3636
selector: 'app-identity-form',
37-
imports: [Control, FormError],
37+
imports: [Field, FormError],
3838
templateUrl: './identity-form.html',
3939
styleUrl: './identity-form.scss',
4040
})

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ <h1>Version 1: Getting Started with the Basics</h1>
66
>Username
77
<input
88
type="text"
9-
[control]="registrationForm.username"
9+
[field]="registrationForm.username"
1010
[ariaInvalid]="ariaInvalidState(registrationForm.username())"
1111
/>
1212
<app-form-error [field]="registrationForm.username" />
1313
</label>
1414

15-
<!-- native HTML inputs bound with the [control] directive -->
15+
<!-- native HTML inputs bound with the [field] directive -->
1616
<div>
1717
<label
1818
>Age
1919
<input
2020
type="number"
21-
[control]="registrationForm.age"
21+
[field]="registrationForm.age"
2222
[ariaInvalid]="ariaInvalidState(registrationForm.age())"
2323
/>
2424
<app-form-error [field]="registrationForm.age" />
@@ -35,7 +35,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
3535
<div role="group">
3636
<input
3737
type="email"
38-
[control]="emailField"
38+
[field]="emailField"
3939
[ariaLabel]="'E-Mail ' + $index"
4040
[ariaInvalid]="ariaInvalidState(emailField())"
4141
/>
@@ -49,14 +49,14 @@ <h1>Version 1: Getting Started with the Basics</h1>
4949
</fieldset>
5050
<label
5151
>Subscribe to Newsletter?
52-
<input type="checkbox" [control]="registrationForm.newsletter" />
52+
<input type="checkbox" [field]="registrationForm.newsletter" />
5353
</label>
5454
<label
5555
>I agree to the terms and conditions
5656
<input
5757
type="checkbox"
5858
[ariaInvalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions())"
59-
[control]="registrationForm.agreeToTermsAndConditions"
59+
[field]="registrationForm.agreeToTermsAndConditions"
6060
/>
6161
</label>
6262
<app-form-error [field]="registrationForm.agreeToTermsAndConditions" />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, inject, signal } from '@angular/core';
2-
import { Control, FieldState, form, maxLength, min, minLength, pattern, required, schema, submit } from '@angular/forms/signals';
2+
import { Field, FieldState, form, maxLength, min, minLength, pattern, required, schema, submit } from '@angular/forms/signals';
33

44
import { FormError } from '../form-error/form-error';
55
import { RegistrationService } from '../registration-service';
@@ -39,7 +39,7 @@ export const formSchema = schema<RegisterFormData>((fieldPath) => {
3939

4040
@Component({
4141
selector: 'app-registration-form-1',
42-
imports: [BackButton, Control, DebugOutput, FormError],
42+
imports: [BackButton, Field, DebugOutput, FormError],
4343
templateUrl: './registration-form-1.html',
4444
styleUrl: './registration-form-1.scss',
4545
})

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
1111
>Username
1212
<input
1313
type="text"
14-
[control]="registrationForm.username"
14+
[field]="registrationForm.username"
1515
[ariaInvalid]="ariaInvalidState(registrationForm.username)"
1616
/>
1717
@if (registrationForm.username().pending()) {
@@ -20,13 +20,13 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
2020
<app-form-error [field]="registrationForm.username" />
2121
</label>
2222

23-
<!-- native HTML inputs bound with the [control] directive -->
23+
<!-- native HTML inputs bound with the [field] directive -->
2424
<div>
2525
<label
2626
>Age
2727
<input
2828
type="number"
29-
[control]="registrationForm.age"
29+
[field]="registrationForm.age"
3030
[ariaInvalid]="ariaInvalidState(registrationForm.age)"
3131
/>
3232
<app-form-error [field]="registrationForm.age" />
@@ -39,7 +39,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
3939
<input
4040
type="password"
4141
autocomplete
42-
[control]="registrationForm.password.pw1"
42+
[field]="registrationForm.password.pw1"
4343
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
4444
/>
4545
<app-form-error [field]="registrationForm.password.pw1" />
@@ -49,7 +49,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
4949
<input
5050
type="password"
5151
autocomplete
52-
[control]="registrationForm.password.pw2"
52+
[field]="registrationForm.password.pw2"
5353
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
5454
/>
5555
<app-form-error [field]="registrationForm.password.pw2" />
@@ -67,7 +67,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
6767
<div role="group">
6868
<input
6969
type="email"
70-
[control]="emailField"
70+
[field]="emailField"
7171
[ariaLabel]="'E-Mail ' + $index"
7272
[ariaInvalid]="ariaInvalidState(emailField)"
7373
/>
@@ -81,12 +81,12 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
8181
</fieldset>
8282
<label
8383
>Subscribe to Newsletter?
84-
<input type="checkbox" [control]="registrationForm.newsletter" />
84+
<input type="checkbox" [field]="registrationForm.newsletter" />
8585
</label>
8686

8787
<label>
8888
Topics (multiple possible):
89-
<select [control]="registrationForm.newsletterTopics">
89+
<select [field]="registrationForm.newsletterTopics">
9090
<option value=""></option>
9191
<option value="Angular">Angular</option>
9292
<option value="Vue">Vue</option>
@@ -100,7 +100,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
100100
<input
101101
type="checkbox"
102102
[ariaInvalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
103-
[control]="registrationForm.agreeToTermsAndConditions"
103+
[field]="registrationForm.agreeToTermsAndConditions"
104104
/>
105105
</label>
106106
<app-form-error [field]="registrationForm.agreeToTermsAndConditions" />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, inject, resource, signal } from '@angular/core';
2-
import { applyEach, applyWhen, Control, customError, CustomValidationError, disabled, email, FieldTree, form, maxLength, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
2+
import { applyEach, applyWhen, Field, customError, CustomValidationError, disabled, email, FieldTree, form, maxLength, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
33

44
import { BackButton } from '../back-button/back-button';
55
import { DebugOutput } from '../debug-output/debug-output';
@@ -121,7 +121,7 @@ export const formSchema = schema<RegisterFormData>((fieldPath) => {
121121

122122
@Component({
123123
selector: 'app-registration-form-2',
124-
imports: [BackButton, Control, DebugOutput, FormError],
124+
imports: [BackButton, Field, DebugOutput, FormError],
125125
templateUrl: './registration-form-2.html',
126126
styleUrl: './registration-form-2.scss',
127127
})

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
1111
>Username
1212
<input
1313
type="text"
14-
[control]="registrationForm.username"
14+
[field]="registrationForm.username"
1515
[ariaInvalid]="ariaInvalidState(registrationForm.username)"
1616
/>
1717
@if (registrationForm.username().pending()) {
@@ -23,13 +23,13 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
2323
<!-- A whole child form with own model -->
2424
<app-identity-form [identity]="registrationForm.identity" />
2525

26-
<!-- native HTML inputs bound with the [control] directive -->
26+
<!-- native HTML inputs bound with the [field] directive -->
2727
<div>
2828
<label
2929
>Age
3030
<input
3131
type="number"
32-
[control]="registrationForm.age"
32+
[field]="registrationForm.age"
3333
[ariaInvalid]="ariaInvalidState(registrationForm.age)"
3434
/>
3535
<app-form-error [field]="registrationForm.age" />
@@ -42,7 +42,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
4242
<input
4343
type="password"
4444
autocomplete
45-
[control]="registrationForm.password.pw1"
45+
[field]="registrationForm.password.pw1"
4646
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
4747
/>
4848
<app-form-error [field]="registrationForm.password.pw1" />
@@ -52,7 +52,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
5252
<input
5353
type="password"
5454
autocomplete
55-
[control]="registrationForm.password.pw2"
55+
[field]="registrationForm.password.pw2"
5656
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
5757
/>
5858
<app-form-error [field]="registrationForm.password.pw2" />
@@ -70,7 +70,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
7070
<div role="group">
7171
<input
7272
type="email"
73-
[control]="emailField"
73+
[field]="emailField"
7474
[ariaLabel]="'E-Mail ' + $index"
7575
[ariaInvalid]="ariaInvalidState(emailField)"
7676
/>
@@ -84,10 +84,10 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
8484
</fieldset>
8585
<label
8686
>Subscribe to Newsletter?
87-
<input type="checkbox" [control]="registrationForm.newsletter" />
87+
<input type="checkbox" [field]="registrationForm.newsletter" />
8888
</label>
8989
<app-multiselect
90-
[control]="registrationForm.newsletterTopics"
90+
[field]="registrationForm.newsletterTopics"
9191
label="Topics (multiple possible):"
9292
/>
9393
<app-form-error [field]="registrationForm.newsletterTopics" />
@@ -96,7 +96,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
9696
<input
9797
type="checkbox"
9898
[ariaInvalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
99-
[control]="registrationForm.agreeToTermsAndConditions"
99+
[field]="registrationForm.agreeToTermsAndConditions"
100100
/>
101101
</label>
102102
<app-form-error [field]="registrationForm.agreeToTermsAndConditions" />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, inject, resource, signal } from '@angular/core';
2-
import { apply, applyEach, applyWhen, Control, customError, CustomValidationError, disabled, email, FieldTree, form, maxLength, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
2+
import { apply, applyEach, applyWhen, Field, customError, CustomValidationError, disabled, email, FieldTree, form, maxLength, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
33

44
import { BackButton } from '../back-button/back-button';
55
import { DebugOutput } from '../debug-output/debug-output';
@@ -128,7 +128,7 @@ export const formSchema = schema<RegisterFormData>((fieldPath) => {
128128

129129
@Component({
130130
selector: 'app-registration-form-3',
131-
imports: [BackButton, Control, DebugOutput, FormError, IdentityForm, Multiselect],
131+
imports: [BackButton, Field, DebugOutput, FormError, IdentityForm, Multiselect],
132132
templateUrl: './registration-form-3.html',
133133
styleUrl: './registration-form-3.scss',
134134
})

0 commit comments

Comments
 (0)