javascript / intermediate
Snippet
Implementierung der ControlValueAccessor-Schnittstelle für eigene Formularsteuerelemente
Durch die Implementierung der ControlValueAccessor-Schnittstelle schließt eine Klasse einen Vertrag mit Angular Forms, um als Brücke zwischen dem DOM und dem reaktiven Formularmodell zu fungieren, was eine polymorphe Einbindung in Formular-Bindings ermöglicht.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Component, forwardRef } from '@angular/core';import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';@Component({selector: 'app-counter-input',standalone: true,template: `<button (click)="increment()">+1 (Value: {{ value }})</button>`,providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => CounterInputComponent),multi: true}]})export class CounterInputComponent implements ControlValueAccessor {value = 0;private onChange = (val: number) => {};private onTouched = () => {};writeValue(val: number): void { this.value = val ?? 0; }registerOnChange(fn: (val: number) => void): void { this.onChange = fn; }registerOnTouched(fn: () => void): void { this.onTouched = fn; }increment(): void {this.value++;this.onChange(this.value);this.onTouched();}}
angular
Erklärung
1
export class CounterInputComponent implements ControlValueAccessor {
Implementiert explizit den Schnittstellenvertrag, der für benutzerdefinierte Formularsteuerelemente erforderlich ist.
2
writeValue(val: number): void { this.value = val ?? 0; }
Empfängt Werte programmatisch von der Angular-Formular-API und aktualisiert den internen Komponentenstatus.
3
registerOnChange(fn: (val: number) => void): void { this.onChange = fn; }
Registriert eine Callback-Funktion, um das Angular-Formularsystem zu benachrichtigen, wenn der Benutzer den internen Wert ändert.