How to use ngrx-forms - 10 common examples

it('should properly infer value type when used with validate update function', () => {
    // this code is never meant to be executed, it should just pass the type checker
    if (1 !== 1) {
      const state: AbstractControlState = undefined!;
      const v = validate(state, greaterThanOrEqualTo(0));
      const v2: number = v.value;
      console.log(v2);
    }
  });
});

it('should properly infer value type when used with validate update function', () => {
    // this code is never meant to be executed, it should just pass the type checker
    if (1 !== 1) {
      const state: AbstractControlState = undefined!;
      const v = validate(state, minLength(2));
      const v2: string = v.value;
      console.log(v2);
    }
  });
});

it('should properly infer value type when used with validate update function', () => {
    // this code is never meant to be executed, it should just pass the type checker
    if (1 !== 1) {
      const state: AbstractControlState = undefined!;
      const v = validate(state, required);
      const v2: number = v.value;
      console.log(v2);
    }
  });
});

it('should properly infer value type when used with validate update function', () => {
    // this code is never meant to be executed, it should just pass the type checker
    if (1 !== 1) {
      const state: AbstractControlState = undefined!;
      const v = validate(state, lessThan(2));
      const v2: number = v.value;
      console.log(v2);
    }
  });
});

it('should properly infer value type when used with validate update function', () => {
    // this code is never meant to be executed, it should just pass the type checker
    if (1 !== 1) {
      const state: AbstractControlState = undefined!;
      const v = validate(state, greaterThan(0));
      const v2: number = v.value;
      console.log(v2);
    }
  });
});

it('should properly infer value type when used with validate update function', () => {
    // this code is never meant to be executed, it should just pass the type checker
    if (1 !== 1) {
      const state: AbstractControlState = undefined!;
      const v = validate(state, requiredTrue);
      const v2: boolean = v.value;
      console.log(v2);
    }
  });
});

get passwordState() {
    return cast(this.formState.controls.password);
  }

  dateValueConverter: NgrxValueConverter = {
    convertViewToStateValue(value) {
      if (value === null) {
        return null;
      }

      // the value provided by the date picker is in local time but we want UTC so we recreate the date as UTC
      value = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
      return NgrxValueConverters.dateToISOString.convertViewToStateValue(value);
    },
    convertStateToViewValue: NgrxValueConverters.dateToISOString.convertStateToViewValue,
  };

  constructor(private actionsSubject: ActionsSubject) { }

  reset() {
    this.actionsSubject.next(new SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
    this.actionsSubject.next(new ResetAction(INITIAL_STATE.id));
  }

  submit() {
    if (this.formState.isInvalid) {
      return;
    }

    this.submittedValue = this.formState.value;
  }

get metaState(): FormGroupState {
    return this.formState.controls.meta as FormGroupState;
  }

  dateValueConverter: NgrxValueConverter = {
    convertViewToStateValue(value) {
      if (value === null) {
        return null;
      }

      // the value provided by the date picker is in local time but we want UTC so we recreate the date as UTC
      value = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
      return NgrxValueConverters.dateToISOString.convertViewToStateValue(value);
    },
    convertStateToViewValue: NgrxValueConverters.dateToISOString.convertStateToViewValue,
  };

  ngAfterViewInit() {
    const isErrorState = (state: AbstractControlState) => state.isInvalid && (state.isDirty || state.isTouched || state.isSubmitted);

    // sadly, material 2 only properly integrates its error handling with @angular/forms; therefore
    // we have to implement a small hack to make error messages work
    const meta = () => this.formState.controls.meta as FormGroupState;
    this.inputs.find(i => i.id === 'priority')!._isErrorState = () => isErrorState(meta().controls.priority);
    this.inputs.find(i => i.id === 'duedate')!._isErrorState = () => isErrorState(meta().controls.duedate);
    this.inputs.find(i => i.id === 'text')!._isErrorState = () => isErrorState(this.formState.controls.text);
  }

  onSubmit() {
    if (this.formState.isInvalid) {
      return;

this.submittedValue$ = store.pipe(select(s => s.material.submittedValue));
  }

  hobbyOptions = ['Sports', 'Video Games'];

  dateValueConverter: NgrxValueConverter = {
    convertViewToStateValue(value) {
      if (value === null) {
        return null;
      }

      // the value provided by the date picker is in local time but we want UTC so we recreate the date as UTC
      value = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
      return NgrxValueConverters.dateToISOString.convertViewToStateValue(value);
    },
    convertStateToViewValue: NgrxValueConverters.dateToISOString.convertStateToViewValue,
  };

  reset() {
    this.store.dispatch(new SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
    this.store.dispatch(new ResetAction(INITIAL_STATE.id));
  }

  submit() {
    this.formState$.pipe(
      take(1),
      filter(s => s.isValid),
      map(fs => new SetSubmittedValueAction(fs.value)),
    ).subscribe(this.store);
  }
}

export function requiredFalse | null | undefined>(value: T): ValidationErrors {
  value = unbox(value) as boolean | null | undefined as T;

  // tslint:disable-next-line:strict-type-predicates
  if (value === null || value === undefined) {
    return {};
  }

  if (!value) {
    return {};
  }

  return {
    required: {
      actual: value,
    },
  };
}