Сообщение проверки всегда отображается в Angular5, даже в текстовом поле есть некоторые значения

Question

Я использую Angular5, новичок в Angular.

У меня есть одно текстовое поле, добавлено подтверждение в это поле.Он работает нормально, когда текстовое поле пусто.Но после ввода некоторых значений в текстовое поле, сообщение проверки все равно отображается.Пожалуйста, помогите, если что-то не так.

<form class="emp-form">  
  <div class="form-group">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="!firstName.Valid">First Name is required</div>
    </div>
    </form>

Здесь Имя обязательно всегда отображается даже при вводе некоторых в текстовое поле.

Заранее спасибо.

Answer 1

Что бы Fateme не упоминалось, оно называется Реактивная форма , но вы пытаетесь проверить простую форму.

Проблема с кодом состоит в том, что firstName.Valid должно быть firstName.valid

, действительное значение должно быть в случае верблюда.

Answer 2

вы можете попробовать что-то вроде:

<form [formGroup]="myForm" class="m-form m-form--fit m-form--label-align-right">
                <div class="form-group m-form__group row" [ngClass]="{
                    'has-danger': myForm.controls['firstName'].invalid && myForm.controls['firstName'].touched,
                    'has-success': myForm.controls['firstName'].valid && myForm.controls['firstName'].touched,
                    'has-no-action': myForm.controls['firstName'].untouched
                }">
                    <label class="col-form-label col-lg-3 col-sm-12" for="name-field">
                        First Name
                        <span class="required" aria-required="true"> * </span>
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <input type="text" class="form-control m-input" formControlName="firstName" name="firstName" id="name-field" placeholder="First Name">
                        <div class="form-control-feedback">Required Field May Not Be Empty</div>
                        <span class="m-form__help">Enter The User First Name</span>
                    </div>
               </div>
<form>

и в компоненте:

this.myForm = this.formBuilder.group({
            "firstName": ['', Validators.required]
    });