angular - 必需的输入文本框在 Angular 5 和 KendoUI 上总是无效的

Question

我尝试用 KendoUI 和 Angular 4 制作一个表单。我有一些必填字段。除 <input kendoTextBox required/> 外，一​​切正常甚至在用户在其中写东西之前它就是红色的。 这是代码:

<form #identityForm="ngForm" class="k-form">

    <label class="k-form-field">
        <span>Profession</span>
        <!-- This required input is red even before the user try to write something -->
        <input kendoTextBox required [(ngModel)]="profession" name="profession"/>
    </label>

    <label class="k-form-field">
        <span>Country</span>
        <!-- This required input have the good behaviour -->
        <kendo-autocomplete required name="country" [(ngModel)]="country" [data]="countries">
        </kendo-autocomplete>
    </label>

</form>

<button [disabled]="!identityForm.valid">Submit</button>

关于 KendoUI documentation , 它似乎运作良好。

只有当用户点击提交按钮时，我需要修改什么才能使必填字段无效？谢谢

Answer 1

您好，我希望它对其他人有用。kendo 文本框在提交前 ng-invalid。 在 css 中如何处理而不是此处的 property.demo 链接。

.k-textbox.ng-invalid:not(.k-invalid) 
        {
            border-color: rgba(0, 0, 0, 0.08) !important
        }

<kendo-textbox formControlName="name" placeholder="Enter Name" [ngClass]="{'k-invalid':submitted && form.get('name').errors?.required }"> </kendo-textbox>

https://angular-8os2ur.stackblitz.io