© best_vector/Shutterstock.com
Windows Developer
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.

Manfred Steyer


Artikelserie: Eingaben mit Angular validierenTeil 1: Eigene Validierungsregeln für templategetriebene FormulareTeil 2: Validieren von reaktiven FormularenTeil 3: Benutzerdefiniertes Validieren

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 .filter .valueChanges .debounceTime(300) .map(values => values.from == values.to) .map(same => (same) ? { roundTrip: true } : {} ) .subscribe(errors => { this.filter.setErrors(errors); });  } […]}

Das betrachtete Beispiel definiert mit einem FormBuilder eine FormGroup, um nach Flügen zu suchen. Anschließend abonniert es dessen Eigenschaft valueChanges, um ihre Werte im Zuge der Eingabe zu validieren. Damit die Anwendung nicht ständig validiert, nutzt das Beispiel den Operator debounceTime. Damit ...

Windows Developer
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.

Manfred Steyer


Artikelserie: Eingaben mit Angular validierenTeil 1: Eigene Validierungsregeln für templategetriebene FormulareTeil 2: Validieren von reaktiven FormularenTeil 3: Benutzerdefiniertes Validieren

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 .filter .valueChanges .debounceTime(300) .map(values => values.from == values.to) .map(same => (same) ? { roundTrip: true } : {} ) .subscribe(errors => { this.filter.setErrors(errors); });  } […]}

Das betrachtete Beispiel definiert mit einem FormBuilder eine FormGroup, um nach Flügen zu suchen. Anschließend abonniert es dessen Eigenschaft valueChanges, um ihre Werte im Zuge der Eingabe zu validieren. Damit die Anwendung nicht ständig validiert, nutzt das Beispiel den Operator debounceTime. Damit ...

Neugierig geworden?


   
Loading...

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