Angular ngbDatePicker - проверка сенсорного ввода не работает - PullRequest
Новая
       3

Angular ngbDatePicker - проверка сенсорного ввода не работает

0 голосов
/ 04 марта 2020

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

В чем проблема с ngbDatePicker?

Шаблон: 

          <div class="col-6">
            <div class="datepicker">
              <input ngbDatepicker class="form-control" placeholder="בחירת תאריך" name="dp" #d="ngbDatepicker"
                formControlName="deadline" required>
              <button class="calendar-btn" (click)="d.toggle()" type="button"></button>
            </div>
          </div>

Ts: 

constructor(private _flowService: FlowsService,
                private _formBuilder: FormBuilder,
                private _datePickerConfig: NgbDatepickerConfig) {

}   ngOnInit() {
        this._setupFormBuilder();
    }

 private _setupFormBuilder() {
        this.createFlowForm = this._formBuilder.group({
            deadline: ['', Validators.required],
        });

    }

1 Ответ

0 голосов
/ 04 марта 2020

Боюсь, вы смешиваете две «проверки»: Angular и bootstrap. js Angular, когда какой-то элемент управления недействителен, добавьте класс ng-invalid , и когда прикоснулся к классу нг-коснулся к элементам управления, см. документы , bootstrap. js добавить класс 'is-invalid', если некоторые недействительны.

ПОМНИТЕ: ng- bootstrap нужно bootstrap. css, но ** НЕ * bootstrap. js или jquery

Используя только Angular, вам нужно только добавить класс (класс копирования и вставки bootstrap недействителен) 

  .form-control.ng-invalid.ng-touched
{
    border-color:#dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.ng-invalid.ng-touched:focus{
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
}

другой вариант - использовать [ngClass] 

<input [ngClass]="{'is-invalid':model?.invalid && model?.touched}"...>

См. stackblitz

...