reactive-forms

typescript
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

function hasActualValue(control: AbstractControl | null): boolean {
  return !!control && control.value !== null && control.value !== '';
}

Cross-Field Password-Confirmation Validator for Angular Reactive Forms

angular reactive-forms validators
by codesnips 3 tabs
typescript
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';

export interface HasUnsavedChanges {
  canDeactivate(): boolean | Observable<boolean>;
}

Warn Users About Unsaved Changes With an Angular CanDeactivate Guard

angular routing guards
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

export interface SearchResult {

Debounced Typeahead Search in Angular with switchMap and Cancellation

angular rxjs typeahead
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, take } from 'rxjs/operators';

Sync Angular Reactive Form State to URL Query Params With a Route-Aware Service

angular reactive-forms router
by codesnips 3 tabs
typescript
import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Injectable()
export class SignupFormService {
  readonly form: FormGroup;

Multi-Step Signup Wizard in Angular with a Shared FormGroup and Stepper Service

angular reactive-forms wizard
by codesnips 4 tabs