Highlights

// app/custom-validation/customer-request.ts

export interface CustomerRequest {
  id: number;
  customerId: string;
  date: Date;
  message: string;
}

// app/custom-validation/not-in-year-validator.directive.ts

import { Directive, Input } from '@angular/core';
import {
  AbstractControl,
  NG_VALIDATORS,
  ValidationErrors,
  Validator,
  ValidatorFn,
} from '@angular/forms';

export function notInYearValidator(notInYear: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.value) {
      return null;
    }
    const date = control.value as Date;
    return date.getFullYear() == notInYear
      ? { notInYear: { value: control.value } }
      : null;
  };
}

// IMPORTANT: The directive is not needed if you're using reactive forms
@Directive({
  selector: '[appNotInYear]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: NotInYearValidatorDirective,
      multi: true,
    },
  ],
})
export class NotInYearValidatorDirective implements Validator {
  @Input('appNotInYear')
  notInYear?: number;

  validate(control: AbstractControl): ValidationErrors | null {
    return this.notInYear ? notInYearValidator(this.notInYear)(control) : null;
  }
}

// app/custom-validation/valid-customer-id-validator.directive.ts

import { Directive } from '@angular/core';
import {
  AbstractControl,
  NG_VALIDATORS,
  ValidationErrors,
  Validator,
  ValidatorFn,
} from '@angular/forms';

export function validCustomerIdValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.value) {
      return null;
    }
    const valid = /^[A-Z]{2}[0-9]{4}$/.test(control.value);
    return valid ? null : { validCustomerId: { value: control.value } };
  };
}

// IMPORTANT: The directive is not needed if you're using reactive forms
@Directive({
  selector: '[appValidCustomerId]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ValidCustomerIdValidatorDirective,
      multi: true,
    },
  ],
})
export class ValidCustomerIdValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return validCustomerIdValidator()(control);
  }
}

<!-- app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.component.html -->

<h1>Customer Request (NGXS with form-plugin)</h1>

<mat-card>
  <form
    ngxsForm="customerRequestFormNgxsPlugin.customerRequestForm"
    [formGroup]="customerRequestForm"
    (ngSubmit)="submit()"
  >
    <mat-form-field>
      <mat-label>Customer ID</mat-label>
      <input matInput name="customerId" formControlName="customerId" />
      <mat-error *ngIf="customerId?.errors?.required"
        >You must enter a value</mat-error
      >
      <mat-error *ngIf="customerId?.errors?.validCustomerId"
        >The ID must start with two uppercase letters followed by four
        numbers</mat-error
      >
    </mat-form-field>
    <mat-form-field>
      <mat-label>Date</mat-label>
      <input
        matInput
        name="date"
        formControlName="date"
        [matDatepicker]="picker"
      />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="date?.errors?.required"
        >You must enter a value</mat-error
      >
      <mat-error *ngIf="date?.errors?.notInYear"
        >The date cannot be in 2020</mat-error
      >
    </mat-form-field>
    <mat-form-field>
      <mat-label>Message</mat-label>
      <textarea matInput name="message" formControlName="message"></textarea>
      <mat-error *ngIf="message?.errors?.required"
        >You must enter a value</mat-error
      >
    </mat-form-field>
    <div class="form-buttons">
      <button
        mat-raised-button
        type="submit"
        color="primary"
        [disabled]="(loading$ | async) || !customerRequestForm.valid"
      >
        Submit
      </button>
    </div>
  </form>
</mat-card>

<h2>Customer Request (JSON)</h2>

<pre
  >{{ customerRequest$ | async | json }}
</pre>

<h2>Form state (JSON)</h2>

<pre
  >{{ customerRequestFormState$ | async | json }}
</pre>

// app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.component.ts

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { withLatestFrom } from 'rxjs/operators';
import { CustomerRequest } from 'src/app/custom-validation/customer-request';
import { CustomerRequestFormNgxsPlugin } from 'src/app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.actions';
import { CustomerRequestFormNgxsPluginSelectors } from 'src/app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.selectors';
import { CustomerRequestForm } from 'src/app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.state';
import { notInYearValidator } from 'src/app/custom-validation/not-in-year-validator.directive';
import { validCustomerIdValidator } from 'src/app/custom-validation/valid-customer-id-validator.directive';

@Component({
  selector: 'app-customer-request-form-ngxs-plugin',
  templateUrl: './customer-request-form-ngxs-plugin.component.html',
})
export class CustomerRequestFormNgxsPluginComponent {
  readonly customerRequestForm = this.formBuilder.group({
    customerId: ['', [Validators.required, validCustomerIdValidator()]],
    date: ['', [Validators.required, notInYearValidator(2020)]],
    message: ['', Validators.required],
  });

  @Select(CustomerRequestFormNgxsPluginSelectors.form)
  customerRequestFormState$!: Observable<CustomerRequestForm>;

  @Select(CustomerRequestFormNgxsPluginSelectors.model)
  customerRequest$!: Observable<CustomerRequest>;

  @Select(CustomerRequestFormNgxsPluginSelectors.loading)
  loading$!: Observable<boolean>;

  get customerId() {
    return this.customerRequestForm.get('customerId');
  }

  get date() {
    return this.customerRequestForm.get('date');
  }

  get message() {
    return this.customerRequestForm.get('message');
  }

  constructor(
    private readonly formBuilder: FormBuilder,
    private readonly store: Store,
    private readonly snackBar: MatSnackBar
  ) {}

  submit(): void {
    this.store
      .dispatch(new CustomerRequestFormNgxsPlugin.Submit())
      .pipe(withLatestFrom(this.customerRequest$))
      .subscribe(([, { id }]) => {
        this.snackBar.open(`Customer request saved with ID #${id}`, 'Close');
      });
  }
}

// app/custom-validation/customer-request.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { CustomerRequest } from 'src/app/custom-validation/customer-request';

export interface CustomerRequestSaveResponse {
  id: number;
}

@Injectable({
  providedIn: 'root',
})
export class CustomerRequestService {
  save(
    customerRequest: CustomerRequest
  ): Observable<CustomerRequestSaveResponse> {
    console.log('Save:', customerRequest);
    return of({
      id: 1,
    }).pipe(delay(1000));
  }
}

// app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.state.ts

import { Injectable } from '@angular/core';
import { Action, State, StateContext } from '@ngxs/store';
import { finalize, tap } from 'rxjs/operators';
import { CustomerRequest } from 'src/app/custom-validation/customer-request';
import { CustomerRequestFormNgxsPlugin } from 'src/app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.actions';
import { CustomerRequestService } from 'src/app/custom-validation/customer-request.service';

export interface CustomerRequestForm {
  model: CustomerRequest;
  status: string;
  dirty: boolean;
}

export interface CustomerRequestFormNgxsPluginStateModel {
  customerRequestForm: CustomerRequestForm;
  loading: boolean;
}

@State<CustomerRequestFormNgxsPluginStateModel>({
  name: 'customerRequestFormNgxsPlugin',
  defaults: {
    customerRequestForm: {
      model: {
        id: 0,
        customerId: '',
        date: new Date(),
        message: '',
      },
      status: 'INVALID',
      dirty: false,
    },
    loading: false,
  },
})
@Injectable()
export class CustomerRequestFormNgxsPluginState {
  constructor(
    private readonly customerRequestService: CustomerRequestService
  ) {}

  @Action(CustomerRequestFormNgxsPlugin.Submit)
  submit(context: StateContext<CustomerRequestFormNgxsPluginStateModel>) {
    const state = context.getState();
    context.patchState({
      loading: true,
    });
    return this.customerRequestService
      .save(state.customerRequestForm.model)
      .pipe(
        tap(({ id }) =>
          context.patchState({
            customerRequestForm: {
              ...state.customerRequestForm,
              model: {
                ...state.customerRequestForm.model,
                id,
              },
            },
          })
        ),
        finalize(() =>
          context.patchState({
            loading: false,
          })
        )
      );
  }
}

// app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.actions.ts

export namespace CustomerRequestFormNgxsPlugin {
  export class Submit {
    static readonly type = '[CustomerRequestFormNgxsPlugin] Submit';
  }
}

// app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.selectors.ts

import { Selector } from '@ngxs/store';
import { CustomerRequest } from 'src/app/custom-validation/customer-request';
import {
  CustomerRequestForm,
  CustomerRequestFormNgxsPluginState,
  CustomerRequestFormNgxsPluginStateModel,
} from 'src/app/custom-validation/customer-request-form-ngxs-plugin/customer-request-form-ngxs-plugin.state';

export class CustomerRequestFormNgxsPluginSelectors {
  @Selector([CustomerRequestFormNgxsPluginState])
  static form({
    customerRequestForm,
  }: CustomerRequestFormNgxsPluginStateModel): CustomerRequestForm {
    return customerRequestForm;
  }

  @Selector([CustomerRequestFormNgxsPluginSelectors.form])
  static model({ model }: CustomerRequestForm): CustomerRequest {
    return model;
  }

  @Selector([CustomerRequestFormNgxsPluginState])
  static loading({
    loading,
  }: CustomerRequestFormNgxsPluginStateModel): boolean {
    return loading;
  }
}