angular4 form 表单中 input输入框的disabled属性
直接加[disabled]="isDisabled"属性的话,出现报错

根据提示,做如下修改
private isEdit: boolean = true;
private isDisabled = true;
private myForm: FormGroup; private roleParams = {
roleName:'',
items:['全部权限']
} ngOnInit() {
this.routerIonfo.params.subscribe((params: Params) => { // 如果想要获取查询参数中的值例如 /index?id=1 把这一句的params换成queryParams就好了,取的方法和下面一样
// 这里是从url参数中取参数的方法,获取的是后面的值如 /page/0 获取的是参数值0
this.isEdit = Number(params['id']) !== 0; // 0:添加,!0编辑
this.roleParams.roleName = params['id'];
});
this.createOrEdit();
this.creatForm();
} createOrEdit(){
if(this.isEdit){ // 如果是编辑的时候,就禁用掉该输入框
this.isDisabled = true;
return;
}
this.isDisabled = false;
this.creatForm();
} // 在初始化表单的时候设置表单中input的属性值,禁用的话 disabled:true
creatForm() {
this.myForm = this.fb.group({
roleName:[{ value:this.roleParams.roleName,disabled:this.isDisabled}]
});
}
<!--双向绑定,控制输入框的是否禁用属性-->
<input class="text-big" type="text" [(ngModel)]="roleParams.roleName" formControlName="roleName">
angular4 form 表单中 input输入框的disabled属性的更多相关文章
- angular2+ form 表单中 input输入框的disabled属性设置无效
最近项目中遇到一个表单input设置disabled问题,直接赋值angular原生的[disabled]=“isDisabled”无效,浏览器警告信息: 无奈,只能按照控制台提示修改: 问题解决
- 2022年form表单中input控件最详细总结
语法 <input type="" name="" id="" value="" placeholder=&quo ...
- Angular中form表单中input自动响应回车事件无效
环境:angular.js 问题:当你在input框中输入搜索信息,然后回车键,信息消失而且也没有执行查询??? 原因:组合查询的代码不是<button ng-click="ch()& ...
- jquery自动去除form表单中input框前后的空格
1. 2. <script type="text/javascript"> $(document).ready(function() { $('#searchform ...
- layui form表单 input输入框获取焦点后 阻止Enter回车自动提交
最简单的解决办法,不影响其他操作,给提交按钮增加 type="button" 属性 完美解决 <button type="button" class=&q ...
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
- Form 表单中的Input元素回车时不保存表单
在Form表单中如果直接在Input元素里敲回车键,那么默认将提交表单,可以通过keydown事件取消默认此操作 $("form").live('keydown',function ...
- form表单中的input有哪些类型
form表单中的input有哪些类型 1.button <input type="button"/> 2.checkbox <input type="c ...
- form表单中经常用到的禁用获取值问题
<input name="country" id="country" size=12 value="disabled提交时得不到该值 " ...
随机推荐
- CentOS-6.5下安装navicat for mysql
一.安装前准备 安装epel源 安装wine 如果不安装wine,则可能会出现安装完navicat for mysql后无法启动的情况. 二.安装epel源 cd /tmp ...
- ffff表单提交的那点事
一.关于application/x-www-form-urlencoded等字符编码的解释说明 在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器 ...
- 为什么会找不到D层文件?
近期两天在重装系统,今天好不easy把各种东西都装齐全了,再打开我的机房收费系统,就提演示样例如以下错误: 看到这个问题.我感觉非常熟,由于曾经也遇到过两次这个问题,都是改了下D层的编译路径.改到了U ...
- 【转】Elasticsearch5.0 安装问题集锦
Elasticsearch5.0 安装问题集锦 elasticsearch 5.0 安装过程中遇到了一些问题,通过查找资料几乎都解决掉了,这里简单记录一下 ,供以后查阅参考,也希望可以帮助遇到同样问题 ...
- [转]C艹中的各种const总结
Ps: 难免碰到C家族的代码 ,各种const直接搞晕,搜集各种资料备用.... ----------------------------------------------------------- ...
- 自己构造用于异步请求的JSON数据
有时候.serialize()或者.serializeJSON()莫名其妙的不能按照我们的要求将数据序列化. 或者其他什么问题然我们需要自己惊醒JSON数据的构造.因为js对JSON的支持做的比较好, ...
- getAttribute()方法
http://www.imooc.com/code/1587 getAttribute()方法 通过元素节点的属性名称获取属性的值. 语法: elementNode.getAttribute(name ...
- hive优化总结
一.表设计 合理分表 合理设计表分区,静态分区.动态分区 二.扫描相关 1.谓词下推(Predicate Push Down) 2.列裁剪(Column Pruning) 在读数据的时候,只关心感兴趣 ...
- 80X86寄存器介绍
80X86寄存器介绍 32位CPU所含有的寄存器有: 4个数据寄存器(EAX.EBX.ECX和EDX)2个变址和指针寄存器(ESI和EDI) 2个指针寄存器(ESP和EBP)6个段寄存器(ES.CS ...
- Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...