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

@Component({
  selector: 'contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  public contactForm;
  public formValid: boolean;
  public formInvalid: boolean;
  public msg: string = "";


  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.contactForm = 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,}')]],
      message: ['']
    });
  }

  // onSubmit() {
  //   if(this.contactForm.valid) {
  //     alert('Contact form sent!');
  //   } else {
  //     alert('Form is not valid');
  //   }
  // }

  onSubmit() {
    this.formValid = this.contactForm.valid;
    this.formInvalid = this.contactForm.invalid;
    if(this.formInvalid) {
      this.msg = "Contact form invalid";
    } else {
      this.msg = "Contact form Sent";
    }
    console.log("valid: " + this.formValid);
    console.log("invalid: " + this.formInvalid);
    console.log(this.contactForm);
  }

}
