Angular 响应式表单之下拉框

siberiawolf 发布于2019-08-23 15:38 / 3314人阅读

摘要：问题分析下拉框绑定的改变时，但是值却没有改变，导致检查错误。性别下拉框的男女保密点击删除保密男女此时就尴尬了，中已经没有保密选项了，但是下拉框绑定的却还是。自定义控件中当更新后，不再中，重置为删除后使用男女

1、问题分析

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

在线预览

git仓库

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;
    }
  }

// 删除后使用 updateValueAndValidity
delete() {
    this.sexOptions = [
      { value: "man", display: "男" },
      { value: "woman", display: "女" },
    ];
    this.formGroup.get("sex").updateValueAndValidity();
  }

私有云专线服务响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102357.html

angular4 学习记录 -- 表单

摘要：在表单上添加的会拦截标准的表单提交事件。并为它们提供了一些共同的行为和属性，其中有些是可观察对象。用于跟踪一个单独的表单控件的值和有效性状态。组件中的顶级表单就是一个。在表单所在的中的上添加，再在指定的验证方法中调用来显示验证失败信息。 angular4 表单模板表单在app.module中导入FormsModule之后，项目中的form表单都会是一个ngForm，也就是一个模板表...

james 2019-08-21 16:45 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 评论0 收藏0
JavaScript 资源大全中文版

摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是由于国...

jzman 2019-08-23 17:18 评论0 收藏0