Question

嘿，我将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],
        });

    }

Answer 1

恐怕您要混合两个“验证”：Angular和bootstrap.js Angular，当某些控件无效时，添加类 ng-invalid ，并在触摸该类时添加 ng-touched 到控件上，请参见the docs，bootstrap.js如果某些类无效，则将其添加为“ is-invalid”类。

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

仅使用Angular，您只需要添加类（引导程序的复制和粘贴类无效）

  .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触摸验证不起作用

1 个答案: