Валидация форм angular

При создании веб приложения на стеке MEAN возникла необходимость сделать валидацию полей ввода в форме регистрации

HTML

<app-header></app-header>

<!-- flash message -->

<div class="flash_message__container">
    <flash-messages></flash-messages>
</div>

<!-- reg form -->

<div class="reg_form">
    <div class="reg_form__round_btn_container">
        <div class="reg_form__round_btn" (click)="goToMain()">
            <img src="../../assets/icon_left.png" alt="" class="reg_form__round_btn_img">
        </div>
    </div>
    <form (submit)=registration() >
        <div class="reg_form__list">
            <div class="reg_form__title">
                <h2 class="reg_form__title_text">Приветствуем!</h2>
            </div>
            <div class="reg_form__subtitle">
                <p class="reg_form__subtitle_text">Мы очень рады видеть вас, на просторах нашего месенджера! Для продолжения выполните регистрацию.</p>
            </div>
            <div class="reg_form__input_component">
                <p class="reg_form__input_title">Email</p>
                <input type="text" formControl="email" [(ngModel)]="email" name="email" class="reg_form__input" placeholder="Введите адрес эл. почты">
            </div>
            <div class="reg_form__input_component">
                <p class="reg_form__input_title">Пароль</p>
                <input type="password" [(ngModel)]="pass" name="pass" class="reg_form__input" placeholder="Придумайте пороль">
            </div>
            <div class="reg_form__input_component">
                <p class="reg_form__input_title">Повторите пороль</p>
                <input type="password" [(ngModel)]="pass_r" name="pass_r" class="reg_form__input" placeholder="Введите пороль снова">
            </div>
            <div class="reg_form__continue_btn_container">
                <button type="submit" class="reg_form__continue_btn">Продолжить</button>
            </div>
            <div class="reg_form__subtitle_link_container">
                <a href="/login" class="reg_form__subtitle_link">Уже есть аккаунт?</a>
            </div>
        </div>
    </form>
</div>

ts

import { Component, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormControl, Validators } from "@angular/forms";

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

  email = new FormControl('123', Validators.email);

  constructor() { }

  ngOnInit(): void {
    this.email.statusChanges.subscribe((status) => console.log(status));
  }

Но возникает ошибка ERROR TypeError: "can't assign to property "validator" on "email": not an object"

В некоторых источниках пишут что нужно писать так [formControl]="email" , но если я так делаю то у меня возникает ошибка ERROR TypeError: "can't assign to property "validator" on "[object Object]": not an object" и в input появляется текст [object Object]

Незнаю как решить эту проблему()