别院牧志知识库 别院牧志知识库
首页
  • 基础

    • 全栈之路
    • 😎Awesome资源
  • 进阶

    • Python 工匠系列
    • 高阶知识点
  • 指南教程

    • Socket 编程
    • 异步编程
    • PEP 系列
  • 面试

    • Python 面试题
    • 2022 面试记录
    • 2021 面试记录
    • 2020 面试记录
    • 2019 面试记录
    • 数据库索引原理
  • 基金

    • 基金知识
    • 基金经理
  • 细读经典

    • 德隆-三个知道
    • 孔曼子-摊大饼理论
    • 配置者说-躺赢之路
    • 资水-建立自己的投资体系
    • 反脆弱
  • Git 参考手册
  • 提问的智慧
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
首页
  • 基础

    • 全栈之路
    • 😎Awesome资源
  • 进阶

    • Python 工匠系列
    • 高阶知识点
  • 指南教程

    • Socket 编程
    • 异步编程
    • PEP 系列
  • 面试

    • Python 面试题
    • 2022 面试记录
    • 2021 面试记录
    • 2020 面试记录
    • 2019 面试记录
    • 数据库索引原理
  • 基金

    • 基金知识
    • 基金经理
  • 细读经典

    • 德隆-三个知道
    • 孔曼子-摊大饼理论
    • 配置者说-躺赢之路
    • 资水-建立自己的投资体系
    • 反脆弱
  • Git 参考手册
  • 提问的智慧
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 工作
  • 规范

  • Linux

  • 数据库

  • Git

  • 👨‍💻Web

  • 英语

  • Docker

  • 编辑器

  • 网络

  • 前端

    • 前端模板收集
    • 《Vue》笔记

    • Vue 资源
    • Angular

      • Angular 弹框与父组件之间传值的问题(最重要的是父组件接收子组件的返回值)
      • Angular 中如何对一个动态表单根据 select 的选项 disable 关联的 input?
        • 代码
        • 效果
        • 参考链接
    • JavaScript

    • Vue文章

  • 存储

  • 备忘录

  • 如何开始你的单元测试
  • 以程序员的视角看中国——西安篇
  • 💻工作
  • 前端
  • Angular
佚名
2020-06-11
目录

Angular 中如何对一个动态表单根据 select 的选项 disable 关联的 input?

# 代码

基本思路是使用statusChanges监测 form 的 select 控件值,当值发生变化时,对关联值调用disable()方法使能或禁用。

createForm() {
    const controlsConfig = {};
    _.forEach(this.moduleOptions, (moduleOption) => {
      controlsConfig[moduleOption.name] = [
        moduleOption.default_value,
        this.getValidators(moduleOption),
      ];
    });
    this.ipmiModuleForm = this.formBuilder.group(controlsConfig);
    // see also:
    // 1. https://stackoverflow.com/questions/39681674/use-disable-with-model-driven-form
    // 2. https://stackoverflow.com/questions/45412773/how-to-disable-all-formcontrols-inside-a-formgroup
    let modelControl = this.ipmiModuleForm.get('model')
    let ipControl = this.ipmiModuleForm.get('ip_addr')
    let maskControl = this.ipmiModuleForm.get('netmask')
    let gwControl = this.ipmiModuleForm.get('gateway')

    modelControl.statusChanges.subscribe((newStatus) => {
    if (modelControl.value !='dhcp') {
      // 如果网络模式改为dhcp,则配置项全disable,否则enable
      ipControl.enable();
      maskControl.enable();
      gwControl.enable();
    } else {
      ipControl.disable();
      maskControl.disable();
      gwControl.disable();
    }
  });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 效果

关联禁用输入框

# 参考链接

  1. angular - Use disable with model-driven form - StackOverflow (opens new window)
  2. angular - Disable Input fields in reactive form - StackOverflow (opens new window)
  3. angular - How to disable all FormControls inside a FormGroup - StackOverflow (opens new window)
编辑 (opens new window)
#前端#Angular
上次更新: 2024-07-15, 08:03:22
Angular 弹框与父组件之间传值的问题(最重要的是父组件接收子组件的返回值)
var,let,const 三者的特点和区别

← Angular 弹框与父组件之间传值的问题(最重要的是父组件接收子组件的返回值) var,let,const 三者的特点和区别→

最近更新
01
提升沟通亲和力的实用策略
03-26
02
工作
07-15
03
如何选房子
06-25
更多文章>
Theme by Vdoing | Copyright © 2019-2025 IMOYAO | 别院牧志
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式