member_webapp/src/packages/member/component/signup/signup.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
import { Member } from '@loafer/core/reflect';

@Component({
  selector: 'of-member-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {

  signupForm: FormGroup;
  formErrors = {
    'email': '',
    'password': '',
    'pwConfirm': '',
    'name': '',
    'phone': '',
    'company': ''
  };
  member: Member;

  constructor(
    private router: Router,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.signupForm = this.formBuilder.group({
      'email': ['', [
        Validators.required,
        Validators.email
      ]
      ],
      'password': ['', [
        Validators.required,
        Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
        Validators.minLength(6),
        Validators.maxLength(25),
      ]
      ],
      'pwConfirm': ['', [
        Validators.required,
      ]
      ],
      'name': ['', [
        Validators.required
      ]
      ],
      'phone': ['', [
        Validators.required
      ]
      ],
      'company': ['', [
        Validators.required
      ]
      ],
    }, this.pwdMatchValidator);
  }

  pwdMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('pwConfirm').value
       ? null : {'mismatch': true};
 }

  signup() {
    const signinValue = Object.assign({}, this.signupForm.value);
    console.log(signinValue);
  }

}