Angular 9应用中select选中第一个值仍报必填错误是什么原因？

1. 选项值绑定与自定义比较逻辑不匹配：你给循环生成的选项用[value]="sf.frequency"绑定的是sf的frequency属性（基础类型值，如数字、字符串），但compareWith对应的方法默认两个入参都是包含frequency属性的对象。当选中选项触发比较时，基础类型值不存在frequency属性，读取结果为undefined，最终比较结果返回false。
2. Angular判定选中值与绑定字段不匹配后，不会把选中值同步到fund.subscription_frequency，字段值维持初始的null，因此触发必填校验报错。仅第一个可选值触发报错属于偶发现象，是因为第一个值的frequency大概率是0、空字符串这类假值，刚好让idFirst && idSecond判断返回false，其余真值通过了判断后碰巧命中了隐式相等规则，不代表其余值的逻辑是正确的。

根据你的业务需求二选一即可：

方案1：绑定完整频率对象 #

如果业务需要把整个sf对象存入fund.subscription_frequency，只需修改循环选项的值绑定属性，和现有比较逻辑匹配：

<!-- 把[value]改成[ngValue]，绑定完整sf对象 -->
<option *ngFor="let sf of frequencies" [ngValue]="sf">{{sf.name}}</option>

不需要修改compareWith方法代码。

方案2：仅绑定frequency基础值 #

如果业务只需要存sf.frequency的基础类型值，删掉select标签上的[compareWith]="compareSubscriptionFrequenciesByOptionId"属性即可，基础类型值Angular默认可以正常匹配，不需要自定义比较逻辑。

如果需要保留compareWith配置，也可以修改比较方法为直接对比两个值相等：

compareSubscriptionFrequenciesByOptionId(val1, val2) {       
    return val1 === val2;         
}

补充注意事项 #

Angular中[value]仅支持绑定基础类型值，[ngValue]支持绑定任意类型（包括对象），不要在同一个select组件中混用两种绑定方式，避免出现匹配异常。

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