Angular下拉框双向绑定与必填校验报错：Cannot read property 'value' of null

我来帮你搞定这个问题！你遇到的TypeError: Cannot read property 'value' of null错误，根源在于你在selection方法里把selectedValue设为了null，但模板里还在绑定selectedValue.value——null肯定没有value属性，自然就报错了。而且其实你完全不需要手动写selection方法来处理选中事件，Angular的双向绑定已经能自动帮你同步值了。

下面是修正后的完整代码，我会一步步说明改动点：

修正后的模板代码 #

<form class="form-horizontal" (ngSubmit)="submit(frm)" #frm="ngForm">
  <div class="form-group">
    <label class="control-label col-sm-2 selectBox">Type</label>
    <select 
      name="type" 
      class="form-control col-sm-4" 
      [(ngModel)]="selectedValue" 
      #selects="ngModel"
      required
    >
      <option 
        *ngFor="let item of sel" 
        [ngValue]="item"
        [disabled]="item.type === 'Select'"
      >
        {{item.type}}
      </option>
    </select>
    <!-- 优化验证提示：只有触摸过控件且无效时才显示 -->
    <div *ngIf="selects.invalid && selects.touched" class="text-danger">
      Please select your type
    </div>
  </div>
  <div class="form-group">
    <!-- 表单无效时禁用提交按钮，强化交互逻辑 -->
    <button class="btn btn-default" [disabled]="frm.invalid">Submit</button>
  </div>
</form>

修正后的组件代码 #

import { Component} from '@angular/core';
import { colorPreference } from '../colorPreference';
import {NgForm } from '@angular/forms';

@Component({
  templateUrl:'./test.html',
  styleUrls:['./test.scss']
})
export class testComponent{
  sel = [
    {type:'Select',value:''},
    {type:'Free',value:'Free'},
    {type:'Paid',value:'Paid'}
  ];
  selectedValue = this.sel[0];

  constructor(private colorService:colorPreference) { }

  submit(form:NgForm) {
    console.log(form.value);
    // 直接通过selectedValue获取选中的对象和值
    console.log('Selected item:', this.selectedValue);
    console.log('Selected value:', this.selectedValue.value);
  }
}

关键改动说明 #

1. 移除了多余的selection方法：
   Angular的双向绑定[(ngModel)]="selectedValue"会自动同步下拉框选中的选项，完全不需要手动监听change事件再去遍历赋值——之前把selectedValue设为null的操作完全是画蛇添足，直接导致了报错。

2. 把[value]替换为[ngValue]：
   因为你绑定的是整个item对象（不是单纯的字符串值），ngValue支持绑定复杂对象，这样双向绑定能正确把选中的整个对象同步到selectedValue里，避免了值匹配的问题。

3. 优化表单验证体验：

   • 给验证提示添加了selects.touched判断，只有当用户点击过下拉框后未选择有效选项时才显示提示，不会一开始就突兀地展示错误。
   • 给提交按钮添加了[disabled]="frm.invalid"，确保表单无效（比如未选择有效类型）时无法提交，完全符合你的需求。

这样修改后，既实现了下拉框的双向绑定，又能保证未选择有效选项时表单处于无效状态，同时再也不会出现那个null相关的报错了。

内容的提问来源于stack exchange，提问作者Pranab V V