Angular ngbDatePicker - ng 触摸验证不起作用

Question

嘿，我将 ngbDataPicker 与 ng bootstrap 的其他输入一起使用。所有输入都工作正常，但是当我在日期选择器上 touch/click 时，验证在我检查日期并再次删除它后验证不起作用。在其他输入中，当我触摸输入时，验证开始工作。

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],
        });

    }

Answer 1

恐怕你混用了两个"validations"：Angular和bootstrap.jsAngular，当某些控件无效时添加classng-invalid, when is touched the class ng-touched to controls, see the docs, bootstrap.js如果有些无效，请添加 class 'is-invalid'。

记住：ng-bootstrap 需要 bootstrap.css 但**不需要* bootstrap.js 或 jquery

只使用Angular只需要添加class（复制粘贴bootstrap的class无效）

  .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

Angular ngbDatePicker - ng 触摸验证不起作用

Angular ngbDatePicker - ng touch validation not work

angular

ng-bootstrap