Использование ngClass для обновления ввода p-календаря

Question

Я не хочу, чтобы пользователь выбирал будущую дату, но если он / она это делает, я хочу отобразить красную рамку вокруг поля ввода p-календаря.

Мой css код:

    .invalid-date ::ng-deep>p-calendar>.ui-calendar>.ui-inputtext {
     border-color: #a94442;
}

HTML код:

    <div [ngClass]="{'invalid-date': dateValid()}">
                <p-calendar [(ngModel)]="date"
                            [hideOnDateTimeSelect]="true"
                            showIcon="true"
                            appendTo="body"
                            dateFormat="d-M-yy"
                            selectOtherMonths="true"
                            showTime="true"
                            hourFormat="24"
                            ></p-calendar>
     </div>

Машинописный код:

date: Date = moment().toDate();

dateValid(): boolean {
return moment(this.date).isAfter(moment());

}

Answer 1

Я могу дать следующие предложения для решения этой проблемы: 1. Прежде всего, вы должны проверить класс работы или нет. 2. И это лучше, чем вызов методов для проверки даты:

html:

<div [ngClass]="{'invalid-date': isValid}">
            <p-calendar [(ngModel)]="date"
                        [hideOnDateTimeSelect]="true"
                        showIcon="true"
                        appendTo="body"
                        dateFormat="d-M-yy"
                        selectOtherMonths="true"
                        showTime="true"
                        hourFormat="24"
                        ></p-calendar>
 </div>

ts:

isValid: boolean;

ngOnChanges(changes: SimpleChanges) {
  if (changes.date.currentValue != changes.date.previousValue) {
    this.checkValidDate();
  }
}

checkValidDate() {
  this.isValid = moment(this.date).isAfter(moment());
}

Answer 2

Если вы столкнулись с той же проблемой, убедитесь, что у вас нет глобальных стилей, которые переопределяют ваши. Это была проблема, и чтобы ее решить, вы добавляете к своей линии так называемый молоток, который вы хотите исключить из глобального стиля.

     .invalid-date ::ng-deep>p-calendar>.ui-calendar>.ui-inputtext {
      border-color: #a94442 !important;
     }