© best_vector/Shutterstock.com
Teil 3: Benutzerdefiniertes Validieren

Manuelles Validieren mit Angular


In manchen Situationen reichen die Möglichkeiten, die Angular zum Definieren von Validierungsregeln bietet, nicht aus. Glücklicherweise kann eine Anwendung dann die Validierung selbst in die Hand nehmen und das Validierungsergebnis an Angular weiterreichen.

Das Validieren von Eingaben ist wohl eine der wichtigsten Aufgaben bei Geschäftsanwendungen. Wie die letzten beiden Artikel der vorliegenden Serie gezeigt haben, kann eine Anwendung zu diesem Zweck verschiedene Arten von Validierungsregeln definieren und bei Angular hinterlegen. In einigen komplexen Fällen kommt der Entwickler damit jedoch nicht aus und ist gezwungen, die Validierung selbst in die Hand zu nehmen. Beispiele dafür sind Fälle, in denen Validierungsregeln in einer ganz bestimmten Reihenfolge und nur unter ganz bestimmten Bedingungen zu laufen haben.

Der vorliegende Artikel zeigt ein paar Muster hierfür auf. Dabei ist zu betonen, dass diese Muster nur dann verwendet werden sollten, wenn die von Angular vorgesehenen Wege nicht genügen. Den vollständigen Quellcode zum Nachvollziehen der hier gezeigten Lösungen finden Sie unter [1].

Manuelle Validierung reaktiver Formulare

Die Control-Objekte, die bei reaktiven Formularen zur Beschreibung von Steuerelementen zum Einsatz kommen, bieten ein Observable valueChanges. Bei FormControls liefert es nach jeder Eingabe den aktuellen Wert. Kommt hingegen eine FormGroup zum Einsatz, liefert es bei allen Änderungen an einem der gruppierten Steuerelemente ein Objekt mit deren aktuellen Werten. Das Beispiel in Listing 1 macht sich das zunutze. Es prüft während der Eingabe, ob die Felder from und to unterschiedliche Werte aufweisen.

Listing 1: Manuelles Validieren mit „valueChanges“

export class FlightSearchReactiveComponent implements OnInit { public selectedFlight: Flight; public filter: FormGroup; constructor(private flightService: FlightService, private fb: FormBuilder) { } ngOnInit() { this.filter = this.fb.group({ 'from': ['Graz'], 'to': ['Hamburg'] }); this .f...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang