Angular 6 kendo-dropdownlist ERROR TypeError：无法读取未定义的属性“值”答案

【问题标题】：Angular 6 kendo-dropdownlist ERROR TypeError: Cannot read property 'value' of undefinedAngular 6 kendo-dropdownlist ERROR TypeError：无法读取未定义的属性“值”
【发布时间】：2018-11-27 21:25:25
【问题描述】：

我在我的 HTML 中使用了可搜索的 kendo-dropdownlist。如果在下拉列表中选择了值，则代码可以正常工作。但是，如果未选择任何内容，我会在 Chrome 开发人员工具中收到错误消息：错误类型错误：无法读取未定义的属性“值”。

<form class="form-horizontal" #projDetails="ngForm">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="Approver">Approver</label>
                    <div class="col-sm-6">
                        <kendo-dropdownlist [data]="IdData"
                                            [textField]="'text'"
                                            [valueField]="'value'"
                                            [filterable]="true"
                                            (valueChange)="valueChange($event)"
                                            (filterChange)="filterChange($event)"
                                            [(ngModel)]="SelectedIdItem"
                                            name="SelectedIdItem"
                                            [popupSettings]="{ height: 300, width: 300 }"
                                            #SelectedIdItemControl="ngModel"
                                            required
                                            title="Start typing to search">
                        </kendo-dropdownlist>
                    </div>
                </div>
</form>
<button type="submit" class="btn btn-primary" (click)="SubmitDetails(projDetails);">Submit></button>

这里是组件类，提交按钮点击：

   public SubmitDetails(form: NgForm) {
        var dataProjDetail = {
            'Id': form.value.SelectedIdItem.value == undefined ? null : form.value.SelectedIdItem.value 

        };

        //passing data to service
    }

我尝试检查未定义的值并使用 null 替换

form.value.SelectedIdItem.value == undefined ? null : form.value.SelectedIdItem.value

但还是不行。请指导如何处理问题

【问题讨论】：

标签： angular typescript kendo-ui-angular2

【解决方案1】：

别担心，看起来一切正常。当然，value 不是 undefined 和 null 的属性。但我们可以使用<button [disabled]="!formGroup.valid">Submit</button> 或

SubmitDetails(form: ngForm) {
  if (! form.valid) return;
  ...
}

提交前拒绝不良数据。通常使用 formGroup，所以我不能确定 ngForm.valid 是否正常，但那里的逻辑相同。

【讨论】：