博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular 响应式表单之下拉框
阅读量:6509 次
发布时间:2019-06-24

本文共 1388 字,大约阅读时间需要 4 分钟。

1、问题分析

下拉框绑定的 options 改变时,但是 value 值却没有改变,导致检查错误。

2、代码分析

项目中遇到一个问题,选择司机,是一个下拉列表。这个司机列表是一个动态列表,当你选择的司机不再列表中,可以添加司机,然后再选择;也有可能你选择了司机,还未提交时,这个司机就被删除了,需要给出错误提示。

简化一下需要,性别选择,选中了保密后,删除这个选项。

性别下拉框的 options

sexOptions: Option[] = [    { value: 'man', display: '男' },    { value: 'woman', display: '女' },    { value: 'secret', display: '保密' },  ];

点击删除保密

delete() {    this.sexOptions = [      { value: 'man', display: '男' },      { value: 'woman', display: '女' },    ];  }

此时就尴尬了,options 中已经没有保密选项了,但是下拉框绑定的value 却还是 secret。

表单值:{ "sex": "secret" }

现在在删除事件中添加一个重置表单控件的条件,即可解决问题

delete() {    this.sexOptions = [      { value: 'man', display: '男' },      { value: 'woman', display: '女' },    ];    this.formGroup.get('sex').reset();  }

表单的 reset() 方法只是让表单的控件置为 null, 很不友好。如果没有选择 保密选择 ,点击删除按钮,值也会被置为空;项目中的选择司机是批量上传,控件有很多,如果重置,会让用户重新输入,不是很好。

如果这个下拉控件是自定义的,就很好解决了,在 ngOnChanges 时检查当前控件的 value 在不在 options 的 value 中,如果不再则 value 置为 null,并且控件使用 updateValueAndValidity 方法,重新计算控件的值和校验状态。

// 自定义控件中ngOnChanges() {    // 当 optionList 更新后, value 不再 optionList 中,重置 value 为 null    const isReset = this.optionList.some(item => item.value === this.value);    if (!isReset) {      this.value = null;    }  }// 删除后使用 updateValueAndValiditydelete() {    this.sexOptions = [      { value: 'man', display: '男' },      { value: 'woman', display: '女' },    ];    this.formGroup.get('sex').updateValueAndValidity();  }

转载地址:http://ngbfo.baihongyu.com/

你可能感兴趣的文章
NET Framework 3.0 (WinFX) RTM发布
查看>>
图片拼接器
查看>>
中断小笔记
查看>>
C#委托、事件、消息(入门级)
查看>>
FreeBinary 格式说明
查看>>
使用Spring Cloud和Docker构建微服务
查看>>
NB-IoT的成功商用不是一蹴而就
查看>>
九州云实战人员为您揭秘成功部署OpenStack几大要点
查看>>
1.电子商务支付方式有哪些 2.比较不同支付方式的优势劣势
查看>>
医疗卫生系统被爆漏洞,7亿公民信息泄露……
查看>>
神秘函件引发的4G+与全网通的较量
查看>>
CloudCC:智能CRM究竟能否成为下一个行业风口?
查看>>
追求绿色数据中心
查看>>
Web开发初学指南
查看>>
探寻光存储没落的真正原因
查看>>
高通64位ARMv8系列服务器芯片商标命名:Centriq
查看>>
中国人工智能学会通讯——融合经济学原理的个性化推荐 1.1 互联网经济系统的基本问题...
查看>>
戴尔为保护数据安全 推出新款服务器PowerEdge T30
查看>>
今年以来硅晶圆涨幅约达40%
查看>>
构建智能的新一代网络——专访Mellanox市场部副总裁 Gilad Shainer
查看>>