На прошлом уроке мы узнали, как создавать наши первые угловые реактивные формы.
Angular Reactive Form 01: Создание вашей первой формы

Добавление проверки в реактивной форме похоже на то, что мы показываем сообщение об ошибке в соответствии с поведением пользователя форм. Например, кто знает, может быть, какой-нибудь ребенок откроет наш телефон или ноутбук и попытается отправить форму. Возможности есть, кроме шуток. Давайте посмотрим, как работать над добавлением проверки в наши реактивные формы.

Я сосредоточусь в основном на файлах component.html и component.ts, если вы еще не закончили последний блог. Я настоятельно рекомендую проверить последний блог.

Если вы завершили или хотите знать быстро. Продолжить чтение.

В нашем файле app.component.ts импортируйте класс Validators из ‘@angular/forms’.

После того, как мы импортировали наши валидаторы, следующим шагом будет включение наших валидаторов в имя пользователя и контроллер электронной почты. Мы можем объявить его в виде массива, если нам нужно несколько валидаторов.
Здесь я добавил требуемый и адрес электронной почты для управления формой электронной почты.

 this.signupForm = new FormGroup({
      username: new FormControl(null, Validators.required),
      email: new FormControl(null, [Validators.required, Validators.email]),
   });

Это все в файле Ts,

Таким образом, в app.component.html отображается сообщение об ошибке пользователя в пользовательском интерфейсе.
Все, что нам нужно сделать, это включить переменную формы регистрации и получить доступ к типу сообщения, которое нам нужно показать. .

Как и в нашем случае, требуется показать имя пользователя. Мы берем имя пользователя formControl и получаем доступ к касанию (если пользователь коснулся входного значения, мы показываем ошибку).

<span *ngIf="!signupForm.get('username').valid
 && signupForm.get('username').touched">
    Please enter username
</span>

Как и мудро, я добавил раздел ввода электронной почты.

Код Stackblitz (найти работающий код)
https://stackblitz.com/edit/angular-reactive-basic-validation