验证消息始终显示在 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

您可以尝试类似的方法：

<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]
    });

Answer 2

无论 Fateme 提到什么都称为 Reactive Form 但您正在尝试验证简单的形式。

你的代码问题是 firstName.Valid 应该是 firstName.valid

有效的应该是驼峰式。

验证消息始终显示在 Angular5 中，即使文本框有一些值

Validation message always displayed in Angular5 even the textbox have some values

angular

angular-validation