javascript / intermediate
Snippet
Typsichere reaktive Formulare
Seit Angular 14 sind reaktive Formulare streng typisiert. Die Verwendung von Interfaces für FormGroups stellt sicher, dass Fehler zur Kompilierzeit auftreten, wenn auf nicht existierende Steuerelemente zugegriffen oder ein falscher Typ zugewiesen wird. Die Option 'nonNullable' verhindert, dass der Wert beim Zurücksetzen des Formulars null wird.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface UserForm {email: FormControl<string>;age: FormControl<number | null>;}@Component({...})export class MyComponent {loginForm = new FormGroup<UserForm>({email: new FormControl('', { nonNullable: true }),age: new FormControl(null)});submit() {const emailValue: string = this.loginForm.controls.email.value;}}
angular
Erklärung
1
new FormGroup<UserForm>(...)
Wendet strikte TypeScript-Typen auf die Formularstruktur an.
2
{ nonNullable: true }
Stellt sicher, dass der Wert des Elements beim Zurücksetzen auf den Initialwert statt auf null gesetzt wird.