Question

在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' };

Answer 1

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

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

<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

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

1 个答案: