Проверка поля ввода в угловых значениях с помощью formControl

Question

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

<form [formGroup]="personalInfoForm" novalidate [ngClass]="{submitted: formSumitAttempt}"> 
     <div class="row">
     <div class="col-lg-6">
      <label for="firstName" class="userID control-label">First Name</label>

                <input type="text" class="form-control" id="firstName" placeholder="Name" formControlName="firstName"  [(ngModel)]="firstName"  required>
                <div *ngIf ="firstName?.touched && firstName?.errors" class="alert alert-danger">
                    <div [hidden]="!firstName.errors.required">
                        Name is required
                    </div>
                    </div></div></div>

Answer 1

в вашем компоненте

personalInfoForm=new formGroup({
 firstname:new FormControl('',[Validators.required])
})

ваш HTML

<form [formGroup]="personalInfoForm" novalidate [ngClass]="{submitted: formSumitAttempt}"> 
     <div class="row">
     <div class="col-lg-6">
      <label for="firstName" class="userID control-label">First Name</label>

<input type="text" class="form-control" id="firstName" placeholder="Name" formControlName="firstName"   required>
                <div *ngIf ="personalInfoForm.controls['firstname'].hasError('required')" class="alert alert-danger">
 Name is required </div>
</div></div>