html - 当输入的日期小于当前日期时，Angular 7 :Apply style sheet to input field on change of value i. e

Question

我对 HTML 和 CSS 很陌生。 当输入的日期小于当前日期时，我遇到了该字段不允许用户保存的生产问题。我可以让它适用于简单的 Html 输入字段，但在应用程序中它很棘手

我在组件 typescript 文件中写了一个函数，当输入的日期小于当前日期时，它将存储消息并显示消息

<msw-datetime-picker  formControlName="dueDate" [pickerType]="'calendar'" (valueChange)="checkDueDate($event, i)"></msw-datetime-picker>
                  <msw-validation-errors [hidden]="certificateControls.controls[i].controls.dueDate.dirty"
                    [errors]="certificateControls.controls[i].controls.dueDate.errors"  errorPrefix="Expiry Date">
                  </msw-validation-errors>
                  <ng-container *ngIf="errorMsg && errorMsg[i] && errorMsg[i].showWarning">
                    {{errorMsg[i].warningMessage}}
                  </ng-container>

组件.ts

checkDueDate(enteredDate)
    {
         if(enteredDate<=currentDate)
        {
           //get the input field
           const expiryDate = this.otherInfoForm['controls']['panShipCertificates']['controls'][i] 
             ['controls']['dueDate'];
           expiryDate.setValidators([Validators.required]);  
           expiryDate.markAsDirty();
           //this.otherDetail.burningLng.setErrors({'required': true});
           **this.errorMsg[i]** = { showWarning: true, warningMessage: "Date is Expired" }

         }
    }

我想在 this.errorMsg[i] 包含消息时应用下面的 CSS

msw-datetime-picker.ng-dirty.ng-invalid input.form-control {
        border: 1px solid #FFABAB !important;
        display: block;
    }

UI 专家，请帮助在这种情况下应用 CSS 的最佳方法是什么

• 1. 是否可以从 component.ts 文件(即在 checkDueDate() 函数中)应用 CSS？或者
  1. 当 ng-container 包含消息时，在模板文件中应用 CSS？

提前谢谢你。

Answer 1

首先，尝试最小化您的 css 类，如下所示:您的代码:

msw-datetime-picker.ng-dirty.ng-invalid input.form-control {
    border: 1px solid #FFABAB !important;
    display: block;
}

改进:

.example-class {
    border: 1px solid #FFABAB !important;
    display: block;
}

现在，您可以在此场景中使用带条件的 ngClass。

在您的代码中:

  <div class="date-error" [ngClass]="{'first': errorMsg[i].length > 0 }" *ngIf="errorMsg && errorMsg[i] && errorMsg[i].showWarning">
        {{errorMsg[i].warningMessage}}
  </div>

或者，您可以使用一个在 errorMsg[i].length > 0 返回 true 时返回 true 的变量，并在您的模板中使用它。