Validierung auf Kendo UI für Angular DatePicker funktioniert nicht

Question

Ich versuche Formularvalidierung auf einem Kendo UI für Angular DatePicker zu verwenden und es scheint einfach nicht zu funktionieren.

Ich mache folgendes auf allen anderen Formularelemente:

<div class="form-group row" [ngClass]="{ 'has-danger' : email.invalid && (email.dirty || email.touched) }"> 
    <input id="email" type="text" class="form-control" [(ngModel)]="member.email" name="email" #email="ngModel" required /> 
</div> 

Das perfekt funktioniert gut.

Aber wenn ich das gleiche mit dem Kendo UI für Angular Datepicker versuche ich die folgende Fehlermeldung erhalten:

<div class="form-group row" [ngClass]="{ 'has-danger' : geburtsdatum.invalid && (geburtsdatum.dirty || geburtsdatum.touched) }"> 
    <kendo-datepicker 
     id="geburtsdatum" 
     [format]="'dd.MM.yyyy'" 
     [(value)]="mitglied.geburtsdatum" 
     #geburtsdatum="ngModel" 
     required> 
    </kendo-datepicker> 
</div> 

Jetzt bekomme ich den Fehler:

There is no directive with "exportAs" set to "ngModel". 

Ich kann nicht scheinen zu finden, eine Möglichkeit, Kendo UI für eckige Formelemente auf einfache Weise zu validieren.

Answer 1

Die exportAs definiert den Namen unter, welcher die Komponente/Direktive exportiert wird. In diesem Fall möchten Sie ngModel exportieren, das in der Komponentendeklaration nicht vorhanden ist. Die Lösung ist einfach - verwenden Sie einfach [(ngModel)] statt [(value)] Bindung. So Angular in der Lage sein NgModel Instanz auswählen und exportieren:

<kendo-datepicker 
    id="geburtsdatum" 
    [format]="'dd.MM.yyyy'" 
    [(ngModel)]="mitglied.geburtsdatum" 
    #geburtsdatum="ngModel" 
    required> 
</kendo-datepicker> 

Überprüfen Sie die eckige Form Dokumentation für weitere Details, wie zum Anzeigen/Verbergen richtig Validierungsfehler.

https://angular.io/guide/forms#show-and-hide-validation-error-messages

[TL; DR]

Die Datepicker Komponente implementiert die ControlValueAccessor-Schnittstelle, die es vollständig kompatibel Angular Formularkomponente macht. Die Angular Validation on the other hand works gegen AbstractControl Instanzen (im Grunde NgModel oder FormControl-Anweisungen).

In diesem Sinne, um die Validierung Funktion zu erhalten, müssen Sie die Komponente entweder mit [ngModel] oder [Formcontrol | formControlName] schmücken:

<kendo-datepicker 
     name="birthDate" 
     [(ngModel)]="user.birthDate" 
     [min]="min" 
     [max]="max" 
></kendo-datepicker> 

Hier ist eine Arbeits Demo, die dies zeigt, :

https://plnkr.co/edit/seJ4jLg9WziemQtCVuxk?p=preview

Für weitere Lesungen auf die eckige Form Dokumentation:

https://angular.io/guide/user-input