Asp.Net core angular validation and submit form not working

HTML CODE

The validation is not working at all and also form submit is also not working.

Below are the codes I am using

I named formgroup customerForm and on submit click event trying to collect all the form value but its getting only null.

Can someone help in identifying the problem with the validation? Also my submit button is disabled all the time even if I enable and click it passes only null value.

I am new to angular. My question may sound silly but I have just started working on angular.

Any help is appreciated.

Thanks in advance.

<div class="col-lg-12 grid-margin">
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">Add new customer</h2>
      <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
          <form class="form-customer" [formGroup]="customerForm" (ngSubmit)="saveCustomer(customerForm.value)" novalidate>
            <div class="row">
              <div class="col-lg-6">
                <div class="form-group" [ngClass]="{'is-invalid':!ValidateName()}">
                  <label>Name</label>
                  <input type="text" name="Name" id="Name" class="form-control" formcontrolName="Name" placeholder="Name" />
                  <em *ngIf="!ValidateName() && customerForm.controls.Name.errors.required">required</em>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group" [ngClass]="{'is-invalid':!ValidateEmail()}">
                  <label>Email</label>
                  <input type="text" name="Email" class="form-control" formcontrolName="Email" placeholder="Email" />
                  <em *ngIf="!ValidateEmail() && customerForm.controls.Email.errors.required">required</em>
                  <em *ngIf="!ValidateEmail() && customerForm.controls.Email.errors.pattern">Enter valid email</em>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6">
                <div class="form-group" [ngClass]="{'is-invalid':!ValidateContactNo()}">
                  <label>Contact No</label>
                  <input name="ContactNo" type="text" class="form-control" formcontrolName="ContactNo" placeholder="ContactNo" />
                  <em *ngIf="!ValidateContactNo() && customerForm.controls.ContactNo.errors.required">required</em>
                  <em *ngIf="!ValidateContactNo() && customerForm.controls.ContactNo.errors.pattern">Enter valid contactno</em>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group">
                  <label>Address</label>
                  <input type="text" name="Address" class="form-control" formcontrolName="Address" placeholder="Address" maxlength="500" />
                </div>
              </div>
            </div>
            <button type="submit" class="btn-primary btn-submit pull-right" [disabled]="customerForm.invalid">Submit</button>
          </form>          
        </div>
      </div>
    </div>
  </div>
</div>

Down here all the formcontrol and validators defined but it's also not helping in establishing validation. Is there any external reference which I missed?

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CustomerserviceService } from '../customerservice.service';

@Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {

    constructor(private cust: CustomerserviceService) {
    }

    // convenience getter for easy access to form fields
    get f() { return this.customerForm.controls; }

    data: any;
    customerForm: FormGroup;
    Name: FormControl;
    Email: FormControl;
    Address: FormControl;
    ContactNo: FormControl;

    ngOnInit() {
        const emailRegex = "\A(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)\Z";
        const phoneRegex = "^[7-9][0-9]{9}$";

        this.Name = new FormControl('', [Validators.required]);
        this.Email = new FormControl('', Validators.compose([Validators.required, Validators.pattern(emailRegex)]));
        this.ContactNo = new FormControl('', Validators.compose([Validators.required, Validators.pattern(phoneRegex)]));
        this.Address = new FormControl();        

        this.customerForm = new FormGroup({
            Name: this.Name,
            Email: this.Email,
            Address: this.Address,
            ContactNo: this.ContactNo
        })
    }

    saveCustomer(obj: any) {
        debugger;

        this.cust.saveCustomer(obj).subscribe((data): any => {
            if (data) {
                alert("Data Saved Successfully");
                this.getAllCustomer();
            }
            this.customerForm.reset();
        });
    }

    ValidateName() {
        return this.Name.valid || this.Name.untouched;
    }

    ValidateEmail() {
        return this.Email.valid || this.Email.untouched;
    }

    ValidateContactNo() {
        return this.ContactNo.valid || this.ContactNo.untouched;
    }       

}