Как отключить defaultItem в угловом кендо-выпадающем списке? - PullRequest
Новая
       4

Как отключить defaultItem в угловом кендо-выпадающем списке?

0 голосов
/ 26 июня 2018

Есть ли способ отключить или сделать [defaultItem] доступным только для чтения в kendo-dropdownlist?Если нет, как я могу проверить, что выбрано значение, отличное от 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' };

1 Ответ

0 голосов
/ 26 июня 2018

Когда значение 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

...