解决angualr13 form表单设置disabled不起作用问题

已于 2024-06-17 10:57:51 修改
阅读量940 收藏 9
点赞数 5
分类专栏： Angular 文章标签： angular.js angular form disabled不起作用
于 2024-03-22 06:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoPerson/article/details/136921847
版权
文章讲述了在Angular项目中，form的disabled属性与formControlName结合使用时失效的问题，介绍了如何通过formControlName的disable()和enable()方法来管理表单控件的禁用状态，并提供了解决方案。
摘要由CSDN通过智能技术生成

 

我的博客原文：解决angualr13 form表单设置disabled不起作用问题 

问题

我们在angular项目中form中disabled 属性和 formControlName 结合使用时，会发现disabled 属性不会起作用，代码如下

​

效果却是 

​

这是为什么呢？

原因

formControlName 是 Angular 中的一个指令，用于绑定表单控件，并自动处理表单控件的状态和值。当使用 formControlName 绑定一个表单控件时，它将负责控制该控件的禁用状态。

如何禁用

我们可以通过 formControlName 绑定的表单控件，可以使用 disable() 方法来实现禁用：

 this.config.get('name').disable()

使用 enable() 方法来实现解除禁用： 

// 解除禁用
this.config.get('name').enable()

通过 config.get('name') 来获取通过 formControlName 绑定的表单控件，并使用 enable() 和 disable() 方法来切换其禁用状态。成功解决！YYDS！

今天就介绍到这里啦！ 欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

​

富朝阳
关注
专栏目录
Angular - FormGroup 踩坑合辑之：disabled 状态下的 value
lorie_yy的博客
05-10 967
Angular - FormGroup 踩坑合辑之：disabled 状态下的 value
Angular表单验证FormGroup 清空校验提示
weixin_44811846的博客
05-26 1687
this.formGroup.get('name').setValidators(null); // 不进行校验 this.formGroup.get('name').clearValidators(); // 清空name的校验 this.formGroup.reset(); // 重置验证
angular中input标签中的disabled不生效
weixin_45678402的博客
08-16 733
input动态设置disabled，不生效
Angular2 form表单 disabled问题
特困生Kuel的博客
09-09 1408
const ctrl = new FormControl({value: ‘n/a’, disabled: true}); 通过 FormGroup getRawValue方法,可以获取包含disabled值
angular6表单中禁用disabled设置
weixin_42788847的博客
04-23 2198
1、 配置表单时使用 this.myForm = this.fb.group({ roleName:[{ value:null,disabled:true}] }); 2、方法内使用 1)单项使用 this.myForm.get("roleName").disable(); 2)整个表格使用 this.myForm.disable();
AngularJS ng-disabled在a内无效
weixin_34192816的博客
12-21 385
　　在AngularJS中，对a添加ng-disabled，在disabled情况下，虽显示了不可用的样式，但点击了依旧能触发绑定在a上的ng-click事件。 　　解决方式：将a改为button。 转载于:https://www.cnblogs.com/phoenix-smile/p/5062568.html...
ng-zorro+angular中 input输入框设置disabled属性无效的解决方法
Dominic_W的博客
04-20 5886
错误描述 ng-zorro是遵循Ant Design设计规范的Angular UI组件库，前端开发中angular + ng-zorro结合使用可以事半功倍。 今天在开发过程中发现ng-zorro的一个坑，当我给input输入框设置disabled属性时，无论disabled的值为true或者false都没有效果。 经过多番调查发现，在ng-zorro中使用disabled属性时，disabled属性时灵时不灵，具体有以下几种情况： 1、disabled属性与ngModel同时使用时，disabled效果正
angular form 表单例子
07-19
本文将深入探讨如何使用`FormBuilder`服务在Angular 4中创建动态表单。 Angular 4是Angular的一个版本，它引入了许多改进和优化，使得构建高效、可维护的Web应用变得更加容易。`FormBuilder`是Angular的`...
浅析Angular19 自定义表单控件
08-28
为了解决这个问题，我们需要在使用自定义表单控件时，需要在组件中实现 ControlValueAccessor 接口，并将其注册到FormsModule中。这样，我们就可以使用自定义表单控件了。 Angular19 中的自定义表单控件可以满足...
angular 表单验证器验证的同时限制输入的实现
12-11
在Angular框架中，表单验证是确保用户输入符合特定规则的关键功能。Angular提供了一系列内置的指令，使得在HTML模板中实现表单验证变得简单。在本文中，我们将深入探讨如何在Angular中实现在验证的同时限制输入，...
angular4 form 表单中 input输入框的disabled属性 (实用）
chelen_jak的专栏
01-03 6237
原文出处：https://www.cnblogs.com/leiting/p/8603604.html 直接加[disabled]="isDisabled"属性的话，出现报错 根据提示，做如下修改 ts private isEdit: boolean = true; private isDisabled = true; private myForm: FormGroup; priva...
form 表单中 disabled 属性的元素不参与表单提交
低至一折起的博客
01-26 6648
示例代码： form id="saveForm"> input id="saveForm-age" name="age" disabled="disabled" /> input id="saveForm-age" name="age" disabled="true" /> form> 当上述两种写法出现时，表单提交的数据中，将不包括 age 这个属性，这是因为 inpu
angular ng-disabled
sixteen_cicle的博客
09-02 350
ng-disabled 1.定义和用法 ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。 如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。 2.语法 , , 和 元素都支持该指令。 3.参数值 expression: 如果表达式返回true，则设置为元素添加 disable
Angular 动态属性绑定 - disabled input with formControlName
lorie_yy的博客
06-28 957
Angular 动态属性绑定 - disabled input with formControlName
angular4更改表单中显示的值_angular4 form 表单中 input输入框的disabled属性
weixin_39559333的博客
12-19 909
直接加[disabled]="isDisabled"属性的话，出现报错根据提示，做如下修改private isEdit: boolean = true;private isDisabled = true;private myForm: FormGroup;private roleParams = {roleName:'',items:['全部权限']}ngOnInit() {this.router...
angular中的ng-disabled
adg1994427的博客
11-10 205
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular-1.5.8.js"></script></head><body...
Angular：动态判断字段是否输入，控制某按钮是否可用（按钮的[disabled]属性）
灿灿大王搭建的黄金屋
12-17 2953
要求：忘记密码页面，输入手机号后才能点击“获取短信验证码”按钮，输入验证码后才能点击“下一页”按钮。 方法： 1.定义两个全局变量用于动态判断是否输入了手机号和短信验证码： 2.初始化表单中动态验证是否填写了要求的两个字段，实时改变两个全局变量的值（boolean）： 3.页面上将两个用于判断状态的全局变量绑定到按钮的disabled属性上： 这样就可以实时的取到用户的输入，进行...
form中的input可以设置readonly和disable，请问这两项属性有什么区别？ 举个例子
最新发布
weixin_42095178的博客
02-02 302
readonly 和 disabled 属性在 HTML 表单 元素中都用于限制用户输入，但它们之间存在一些重要的差异。当一个 元素被设置为 readonly，用户仍然可以看到该输入框并可以聚焦它，但无法修改其内容。当一个 元素被设置为 disabled，用户既不能看到输入框也不能聚焦它，以及不能修改其内容。disabled 不仅限制了编辑，还完全禁用了与输入框相关的所有用户交互。readonly 只限制了用户的编辑能力，但允许其他交互（如复制值）。用户不能复制输入框中的内容。
angular属性绑定和[disabled]属性来实现简单的输入框验证
qq_26372385的博客
12-12 5880
使用场景 一个输入框和一个提交按钮，当输入框为空时提交按钮不可用。   2.方法 angular属性绑定和disabled属性。[(ngModel)]是双向绑定。 Html 这里就已经可以实现输入框为空时button不可用，但是在浏览器里，简单的篡改button的disable属性就可以绕过这个验证，进一步需要js验证。 Ts 注：这个comment是预定义的对象。 其实...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

富朝阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值