angular-ngrx-pattern/src/app/pages/users-manager/users-management/user-create/user-create.component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {
  CreateUserFormAction,
  SaveUserFormAction,
} from './../../../../ngrx/users/users.actions';
import { Store } from '@ngrx/store';
import { Component, OnInit } from '@angular/core';
import { MsgState } from 'src/app/ngrx/msg.state';
import { UserState } from 'src/app/ngrx/users/user.state';


@Component({
  selector: 'app-user-create',
  templateUrl: './user-create.component.html',
  styleUrls: ['./user-create.component.css'],
})
export class UserCreateComponent implements OnInit {
  userFormGroup!: FormGroup;

  constructor(
    private store: Store<{ userReducerKey: UserState }>,
    private fb: FormBuilder
  ) {}
  userState!: UserState;
  readonly msgState = MsgState;

  ngOnInit(): void {

    this.store.dispatch(new CreateUserFormAction({}));

    this.store.subscribe((state) => {
      this.userState = state.userReducerKey;

      if(this.userState.msgState==this.msgState.NEW){

        this.userFormGroup = this.fb.group({
          id: [0, Validators.required],
          firstname: [
            '',
            [
              Validators.required,
              Validators.minLength(3),
              Validators.maxLength(15),
            ],
          ],
          lastname: [
            '',
            [
              Validators.required,
              Validators.minLength(3),
              Validators.maxLength(15),
            ],
          ],
          email: ['', [Validators.required, Validators.email]],
          address: this.fb.group({
            numRue: [0, [Validators.required, Validators.min(1)]],
            nomRue: [
              '',
              [
                Validators.required,
                Validators.minLength(3),
                Validators.maxLength(25),
              ],
            ],
            bp: [0, [Validators.required, Validators.min(1)]],
            ville: [
              '',
              [
                Validators.required,
                Validators.minLength(3),
                Validators.maxLength(15),
              ],
            ],
            pays: [
              '',
              [
                Validators.required,
                Validators.minLength(3),
                Validators.maxLength(15),
              ],
            ],
          }),
        });
      }
    });
  }

  onUserSave() {
    if (window.confirm(MsgState.CONFIRM)) {
      this.store.dispatch(new SaveUserFormAction(this.userFormGroup.value));
    }
  }

  onNewUser() {
    this.store.dispatch(new CreateUserFormAction({}));
  }
}