xiongemi

import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

import { nameRegex } from '../regexes.const';
import { AddressFormValue } from './address-form-value.interface';

@Component({
  selector: 'afn-address-form',
  templateUrl: './address-form.component.html',

xiongemi

import { FormGroup } from '@angular/forms';

import { DeliveryPageFormValue } from '../models/delivery-page-form-value.interface';

export function deliveryPageFromValidator(deliveryPageFrom: FormGroup): { [key: string]: any } | null {
  const formValue: DeliveryPageFormValue = deliveryPageFrom.value;
  return deliveryPageFromValueValidator(formValue);
}

export function deliveryPageFromValueValidator(deliveryPageFromValue: DeliveryPageFormValue): { [key: string]: any } | null {

xiongemi

    this.subscription.add(
      this.deliveryPageForm.get('isShippingSame').valueChanges.subscribe((isShippingSame: boolean) => {
        if (isShippingSame) {
          this.deliveryPageForm.get('shippingAddress').reset();
          this.deliveryPageForm.get('shippingAddress').clearValidators();
        } else {
          this.deliveryPageForm.get('shippingAddress').setValidators([Validators.required]);
        }
      })
    );

xiongemi

import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';

export class FormGroupErrorStateMatcher implements ErrorStateMatcher {
  errors: string[];

  constructor(errors: string[]) {
    this.errors = errors;
  }

xiongemi

        <mat-form-field class="mr3">
          <mat-label>
            {{ 'DELIVERY.PASSWORD' | translate }}
            <span aria-hidden="true"> * </span>
          </mat-label>
          <input type="password" matInput formControlName="password" [errorStateMatcher]="passwordErrorStateMatcher" maxlength="30" />
          <mat-error *ngIf="deliveryPageForm.hasError('password')">
            {{ 'ERRORS.REQUIRED' | translate }}
          </mat-error>
          <mat-error *ngIf="deliveryPageForm.get(['account', 'password']).hasError('pattern')">

xiongemi

    NgxsModule.forRoot([], {
      developmentMode: !environment.production
    }),
    NgxsFormPluginModule.forRoot(),
    NgxsResetPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),
    NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
    NgxsStoragePluginModule.forRoot({ key: ['forms'] })

xiongemi

import { ValidationErrors } from '@angular/forms';

export interface FormState<T> {
  model: T;
  dirty: boolean;
  status: string;
  errors: ValidationErrors | null;
}

xiongemi

import { FormState } from './form-state.interface';

export const initFormState: FormState<any> = {
  model: undefined,
  dirty: false,
  status: '',
  errors: null
};

xiongemi

import { initFormState } from 'src/app/models/forms-state-init.const';
import { FormsStateModel } from './froms-state-model.interface';

export const initFormsStateModel: FormsStateModel = {
  deliveryForm: initFormState,
  shippingForm: initFormState,
  paymentForm: initFormState
};

xiongemi

import { Injectable } from '@angular/core';
import { State } from '@ngxs/store';

import { initFormsStateModel } from '../models/forms-state-model-init.const';

@State({
  name: 'forms',
  defaults: initFormsStateModel
})
@Injectable()