如何在 Angular kendo-dropdownlist 中禁用 defaultItem？答案

【问题标题】：How to disable defaultItem in Angular kendo-dropdownlist?如何在 Angular kendo-dropdownlist 中禁用 defaultItem？
【发布时间】：2018-06-25 21:49:26
【问题描述】：

有没有办法在 kendo-dropdownlist 中禁用或使 [defaultItem] 为只读？如果没有，我如何验证是否选择了 defaultItem 以外的值并验证表单？ [disabled]="DepartmentProcessing.invalid 无法按预期工作，因为即使选择了默认项目，它也会启用。这是html

    <form class="form-horizontal" #DepartmentProcessing="ngForm">      
      <div class="form-group" >
                <label class="col-sm-4 control-label" for="dept">Department</label>
                <div class="col-sm-4">
                    <kendo-dropdownlist [data]="departmentlistItems"
                                        [filterable]="true"
                                        [valueField]="'Id'"
                                        [defaultItem]="defaultDepartment"
                                        [textField]="'Description'"
                                        [(ngModel)]="SelectedDepartment"
                                        (filterChange)="handleDepartmentFilter($event)"
                                        #SelectedDepartmentControl="ngModel"
                                        name="SelectedDepartment"
                                        id="SelectedDepartment"
                                        required>
                    </kendo-dropdownlist>
                    <span class="help-block"
                          *ngIf="SelectedDepartmentControl.touched && SelectedDepartmentControl.invalid">
                        Department is required
                    </span>
                </div>
            </div>

            <div class="pull-right">
                <button id="button1id" name="button1id" class="btn btn-danger" (click)="SubmitDept()" [disabled]="DepartmentProcessing.invalid">Submit Department</button>
            </div>

在组件类中，我有

public defaultDepartment: { Id: number, Description: string } = { Id: null, Description: 'Select Department' };

【问题讨论】：

标签： angular validation kendo-dropdown

【解决方案1】：

当 valuePrimitive 未设置为 true 时，组件的值是一个对象，因此不会通过“必需”验证。

您可以将组件绑定到原始值（因此当所选项目的值字段为空/未定义时，表单将无效），或者如果这不是一个选项，请使用 valueChange 事件处理程序来重置表单字段的选择默认项时的值

<kendo-dropdownlist
                [data]="departments"
                [defaultItem]="{ Id: null, Description: 'Select Department' }"
                [textField]="'Description'"
                [valueField]="'Id'"
                (valueChange)="onValueChange($event)"
                [(ngModel)]="SelectedDepartment"
                name="SelectedDepartment"
                required
            >
            </kendo-dropdownlist>

public onValueChange(e) {
  if(!e.Id) {
    this.SelectedDepartment = undefined;
  }
}

PLUNKER

【讨论】：