Question

我有此反应性表单输入，我想根据其验证向其添加绿色或红色bottom-border。在下面的示例中，我仅具有所需的验证，并且当触摸输入且该输入无效时，我想添加类.invalid-input { bottom-border: 3px solid red}。我尝试了以下代码，但无法正常工作。当我将输入留空并移至另一个输入时，它不会显示任何边框。有人可以看到原因吗？

<input
   id="firstName"
   class="form__input"
   type="text"
   placeholder="First Name"
   (keyup.enter)="getErrors()"
   formControlName="firstName"
   ngClass="{
     'invalid-input': firstName.invalid && (firstName.dirty || firstName.touched)
   }"
>

CSS

.valid-input {
  border-bottom: 3px solid green;
}

.invalid-input {
  border-bottom: 3px solid red;
}

Answer 1

直接将类添加到输入字段不是一个好主意，但是：

<div [ngClass]="{'invalid-input': formGroup.controls.firstName.invalid && (formGroup.controls.firstName.dirty || firstName.touched)}">
    <label for="firstName">
        First Name
        <span class="required" aria-required="true"> * </span>
    </label>
    <input
         id="firstName"
         class="form__input"
         type="text"
         placeholder="First Name"
         (keyup.enter)="getErrors()"
         formControlName="firstName" >
</div>

Answer 2

您无需在任何反应式控件中使用ngClass指令角度反应式添加类，从而可以轻松地确定元素的状态。

.ng-invalid.ng-touched , .ng-invalid.ng-dirty{ 
    border-bottom: 3px solid red;
}

在您有疑问时，您需要使用[ngClass] =“ ...”并使用 formGroup.controls.firstName表单控制即时

Answer 3

使用[class.invalid-input]

[class.invalid-input]="firstName.invalid && (firstName.dirty || firstName.touched)"

Answer 4

请尝试以下操作：

[ngClass]="{'invalid-input': firstName.invalid && (firstName.dirty || firstName.touched)}"

Answer 5

尝试这样

<div [ngClass]="{'invalid-input': firstName?.invalid && (firstName?.dirty || firstName?.touched)}"> This is test </div>

or 

<div [ngClass]="{'invalid-input': firstName && (firstName.invalid && (firstName.dirty || firstName.touched))}"> This is test </div>

Answer 6

要解决此问题，我做了两件事： 1.使用以下标记将表单标记为已提交：

 <form [ngClass]="{submitted:myForm.submitted}">

为表单中的所有无效输入字段添加css：

form.submitted .ng-invalid { border：1px实线＃f00; }

我希望它能帮助遇到类似问题的人。

角反应形式：无法使用ngClass

6 个答案: