在 Angular 5 和 KendoUI 上，必需的输入文本框始终无效

Posted 2023-05-07

【中文标题】在 Angular 5 和 KendoUI 上，必需的输入文本框始终无效

【英文标题】：Required input textbox is always invalidate on Angular 5 & KendoUI

【发布时间】：2018-08-14 13:35:39

【问题描述】：

我尝试使用 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 上，它似乎运行良好。

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

【参考方案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