Валидация

Для валидации формы необходимо

добавить тег с директивой ngForm

<form #Myform="ngForm">

Добавить в компонент экспорт директивы

 import { NgForm} from "@angular/forms";

После того как была добавлена директива NgForm при использовании привязки элементов вида

[(ngModel)]="checkUser.surname"

для элементов необходимо задать имя

 <input  name="name"

Варианты валидации

1. Проверка значений в поле с подсказкой.

<div class="form-group">

            <input  name="checkUsername" placeholder="Имя" [(ngModel)]="checkUser.name" #checkUsername="ngModel" required />

            <div [hidden]="checkUsername.valid || checkUsername.untouched">

                Не указано имя

            </div>

        </div>

2. Проверка с всплывающей подсказкой required

<p>

    <input type="text" placeholder="Пароль" value="{{checkUser.password}}" required>

 </p>

3. Доступность кнопки в зависимости от валидации формы

  <button [disabled]="!Myform.valid" (click)="UserRegistration()">Регистрация</button>

Полный листинг формы

<form #Myform="ngForm">

    <div>

        <input name="surname" placeholder="Фамилия" [(ngModel)]="checkUser.surname" />

        <div class="form-group">

            <input  name="checkUsername" placeholder="Имя" [(ngModel)]="checkUser.name" #checkUsername="ngModel" required />

            <div [hidden]="checkUsername.valid || checkUsername.untouched">

                Не указано имя

            </div>

        </div>

        <input name="middleName" placeholder="Отчество" [(ngModel)]="checkUser.middleName" #name="ngModel" required>

        <div>

<p>

                <input name="email" placeholder="Адрес электронной почты" [(ngModel)]="checkUser.email" required>

            </p>

<p>

                <input type="text" placeholder="Пароль" value="{{checkUser.password}}" required>

            </p>

        </div>

        <div>

<p>

                <button [disabled]="!Myform.valid" (click)="UserRegistration()">Регистрация</button>

             </p>

        </div>

    </div>

</form>

Стили

styles: [`

input.ng-touched.ng-invalid {border:solid red 2px;} // поле не заполнено

input.ng-touched.ng-valid {border:solid green 2px;} // поле заполнено

`]

Подробнее