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中，即使文本框中也有一些值

2 个答案: