import { Component, OnInit } from '@angular/core';
import { FormBuilder,Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.css']
})

export class AccountComponent implements OnInit {
public userForm;
public showMessage: boolean = false;
public invalidEntry = 'Invalid entry';

//template driven form
userName = '';
  email: string;
  nickName: string;
  password: string;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit(): void {
    this.userForm = this.formBuilder.group({
      firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
      lastName: ['',[ Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
      email: ['', [ Validators.required,Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]]
    });
  }
  onSubmit(){
    if(this.userForm.valid){
      alert('User form is valid!!')
    } else {
      alert('User form is not valid!!')
    }
  }
  onSubmit1(){
    if(!this.userForm.valid){
      this.showMessage = true;
    }
  }
  //template driven
  onSubmit2(form: NgForm) {
    if (form.valid) {
      console.log(form.value);
      // ...our form is valid, we can submit the data
    }
  }
}
