javascript / expert
Snippet
Eigene Control Value Accessor für wiederverwendbare UIs
Die Implementierung des ControlValueAccessor (CVA) ermöglicht es benutzerdefinierten Komponenten, sich nahtlos in Angulars Reactive- und Template-gesteuerte Formulare zu integrieren. Durch die Bereitstellung des NG_VALUE_ACCESSOR-Tokens wird die Komponente kompatibel mit Direktiven wie ngModel oder formControlName und schlägt die Brücke zwischen internem Status und der Form-API.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Component({selector: 'custom-input',template: `<input (input)="onInput($event)" (blur)="onTouched()" [value]="value">`,providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CustomInput, multi: true }]})export class CustomInput implements ControlValueAccessor {value: string = '';onChange = (val: any) => {};onTouched = () => {};writeValue(val: string): void { this.value = val; }registerOnChange(fn: any): void { this.onChange = fn; }registerOnTouched(fn: any): void { this.onTouched = fn; }onInput(e: Event) {this.value = (e.target as HTMLInputElement).value;this.onChange(this.value);}}
angular
Erklärung
1
providers: [{ provide: NG_VALUE_ACCESSOR, ... }]
Registriert die Komponente als gültigen Provider für Formular-Controls.
2
writeValue(val: string)
Wird von der Form-API verwendet, um den internen Wert der Komponente zu aktualisieren.
3
registerOnChange(fn: any)
Erfasst die Callback-Funktion, um die Form-API über Wertänderungen zu informieren.