Vue.js form object

error-bag.ts

export default class {
  public errors: Record<string, string[]>;

  constructor(errors: Record<string, string[]> = []) {
    this.errors = errors;
  }

  set(errors: Record<string, string[]>) {
    this.errors = errors;
  }

  reset() {
    this.errors = [];
  }

  has(key: string) {
    return this.errors.hasOwnProperty(key) && this.errors[key].length > 0;
  }

  get(key: string) {
    return this.has(key) ? this.errors[key] : [];
  }

  first(key: string) {
    return this.has(key) ? this.errors[key][0] : undefined;
  }
};

form.ts

export default class {
  public data: Record<string, any>;
  public errors: ErrorBag;
  protected readonly initialData: Record<string, any>;
  protected processing: boolean;
  protected complete: boolean;

  constructor(data: Record<string, any>) {
    this.data = data;
    this.initialData = { ...this.data };
    this.errors = new ErrorBag();
    this.processing = false;
    this.complete = false;
  }

  reset() {
    this.data = { ...this.initialData; };
    this.errors.reset();
    this.processing = false;
    this.complete = false;
  }

  startProcessing() {
    this.errors.reset();
    this.processing = true;
    this.complete = false;
  }

  finishProcessing() {
    this.processing = false;
    this.complete = true;
  }

  setErrors(errors: Record<string, string[]>) {
    this.errors.set(errors);
  }
}