ng7 及以上 ngModel与 nz-form 表单冲突警告

最新推荐文章于 2023-08-16 15:29:18 发布
原创 最新推荐文章于 2023-08-16 15:29:18 发布 · 2.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Angular开发中，使用ngModel与Reactive Forms在同一表单字段上可能引起的冲突问题。通过实例代码，展示了如何避免警告信息，直接将数据设置到表单中，实现数据回显的同时，保持代码的整洁与规范。

It looks like you’re using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.
今天在写ng表单编辑回显的时候遇到这个警告
在这里插入图片描述
大概的意思是 ngModel与 nz-form 表单冲突
代码如下，我这里是利用变量接收数据，再将其回显到页面，虽然功能实现了但是看着警告挺不舒服的
在这里插入图片描述
这是将数据直接放入变量中的方法
在这里插入图片描述

后来发现直接将数据set进入表单中即可直接删去ngModal进行数据回显，从而避免浏览器警告的问题(数据属性名要与表单名称相对应)
在这里插入图片描述
希望能够帮到遇到相同问题的朋友

nz-schema-form:基于JSON-Schema的ng-zorro-antd表单生成
04-26
nz-schema-form form generation based on JSON-Schema. Links Troubleshooting Please follow this guidelines when reporting bugs and feature requests: Use board to report bugs and feature requests (not ...
ng-alain表单使用方式详解
08-27
在上面的示例中，我们使用ngModel来绑定输入框的值到数据模型中，并使用nz-form-item和nz-form-control来构建表单控件。 二、响应式表单 响应式表单是一种使用JavaScript代码来构建表单的方式，在ng-alain中，可以...
nz-form使用实例(ngModel、ngModelChange)
weixin_44580808的博客
08-04 2069
<div class="Fill bottom-form-container"> <div nz-row nzGutter="35"> <div nz-col nzSpan="13"> <div class="common-card-container" id="Simulation-Details"> <div class="common-card-title"&g
第五章 angular中的表单
m0_58047238的博客
08-13 567
Angular中的表单 表单控件FormControl：封装了表单的输入，并提供了一些可供操作的对象。 验证器validator：让我们能够以自己喜欢的任何方式验证表单的输入。 观察者observer：让我们能够监听表单的变化，并作出相应的回应。 FormControl和FormGroup Angular中最基础的两个表单对象。 FormControl代表单一的输入字段，它是Angular表单中的最小单元。 FormControl封装了这些字段的值和状态，比如是否有效，是否脏（被修改过），或是否有错误
If ngModel is used within a form tag, either the name attribute must be set or the form control must
城南蝈蝈
12-29 782
原文链接：这里 0.背景 angular项目，用的NG-ZORRO 一个简单的表单提交页面，本来不想用form，直接写的row和col。但是页面太丑了，加上form吧，开始报错（其实就是不熟练）。 1.报错原因及解决方法 我的当时的非主流代码如下： <form nz-form> <nz-row> <nz-col nzSpan="12"> <nz-form-item> <n
ngModel和formControlName处理表单控件
weixin_45678402的博客
08-16 666
ngModel和formControlName处理表单控件
Angular在FormGroup中使用ngModel失效报错问题的解决办法
S筱潇S四维Smile
11-15 2643
在FormGroup中使用ngModel报错解决办法： 一行代码就搞定了，在input标签中添加即可：[ngModelOptions]="{standalone: true}" 示例： &lt;div class="form-group row" [formGroup]="nameForm"&gt; &lt;div class="col-sm-2"&gt;&lt;/d
高效构建动态表单：nz-schema-form与ng-zorro-antd的融合
总结以上知识点，可以得出nz-schema-form是一款功能强大但已停止维护的JSON Schema动态表单生成工具。它允许开发者通过JSON Schema快速创建ng-zorro-antd风格的表单，极大地简化了表单的开发流程。结合Angular、ng-...
<form nz-form [nzLayout]="'inline'" class="search-form"> <nz-row> <nz-col> <nz-form-item> <nz-form-label>  案件名称</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" value="" [(ngModel)]="q.ajmc" name="ajmc" placeholder="请输入案件名称"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <nz-form-item> <nz-form-label>案件编号</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" value="" [(ngModel)]="q.ajbh" name="ajbh" placeholder="请输入案件编号"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <button style="margin-top: 3px;" nz-button type="submit" [nzType]="'primary'" (click)="getDetail(true)">查询</button> <button nz-button type="reset" class="mx-sm">重置</button> </nz-col> </nz-row> </form>
05-31
<form nz-form [nzLayout]="'inline'" class="search-form" (ngSubmit)="onSubmit()"> <nz-row> <nz-col> <nz-form-item> <nz-form-label>  案件名称</nz-form-label> <nz-form-control> <nz-input-...
详解ng-alain动态表单SF表单项设置必填和正则校验
01-21
在使用动态表单时对表单项进行非空校验及正则校验。 使用手机号进行校验，示例如下： 动态表单的基本使用：https://ng-alain.com/form/getting-started/zh 基于基本示例，增加手机号必填与正则校验的例子： @...
Angular 使用移动端ion-modal还有ion-popover组件在pad横向的时候会出现不兼容的问题，推荐使用Angular 之 Overlay
不见来去的博客
08-03 499
ion-modal组件在横向使用pad的时候，弹层是出不来的，已实践特此记录一下 ion-popover组件在横向使用pad的时候，弹出层能出来，但是滚动是有问题。 所以博主发现这些ionic提供的组件虽然好用但是有些场景的兼容性还是有待考究的 **后来博主发现Angular 提供的组件开发包就非常的强大，使用起来页非常的简单，完全可以满足使用的需求** ![在这里插入图片描述](https://img-blog.csdnimg.cn/d4d212fbf6ea48369418d7ea361787ce..
angular——打印之坑（nz-modal里打印，出现打印不完全的问题）
weixin_39436129的博客
07-21 829
项目场景： 对话框中点击打印，打印数据不全 以下是相同数据，产生的打印情景 异常页面： 正常页面： 问题描述： 打印数据量超过一页，点击打印后数据仅有一页，且页面最后混乱，其余数据已获取但不显示 原因分析： 在显示对话框时，html会增加个classcdk-global-scrollblock ，打印替换时，该class还会存在，导致页面不能被全打印出来，其中主要是position: fixed; 影响了整个页面布局 .cdk-global-scrollblock { position:
Angular7设置Input的disabled属性
热门推荐
henreash的专栏
03-31 1万+
在html页面中直接按低版本的方式配置[attr.disabled]="true"，不生效，而且运行时按F12可以看到如下警告： It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this con...
表单form中input组件设置disable未生效 - Angular
survivorsfyh的博客
11-23 2702
当 input 与表单 form 的相结合使用的时候,如果为 input 设置 [disabled]="false" 的属性时发现未能生效; 日志中会抛出如下警告并提供一种方式; It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component c
Angular2~6 [(ngModel)] 与 formControlName 共存 （实用）
chelen_jak的专栏
06-12 3021
原文出处：https://www.jianshu.com/p/6d075cc506a0 延伸阅读：ngular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】 sku-info.html <form [formGroup]="form"> <div> <input [(ngModel)]="it...
formControlName 要不要加[ ]
qqqgg的专栏
03-17 4272
在angualr 官网教程中，响应式表单的formControlName 这个指令，加了[ ],使用时，学他也加上了，怎么也不出效果。后来去掉可以了。 教程中可以，是因为他在前端定义了name= formcontrol(''), 可以写成[formControl]='name'. 教程下面给出这样的做法： profileForm =...
angular4 form 表单中 input输入框的disabled属性 (实用）
chelen_jak的专栏
01-03 6366
原文出处：https://www.cnblogs.com/leiting/p/8603604.html 直接加[disabled]="isDisabled"属性的话，出现报错 根据提示，做如下修改 ts private isEdit: boolean = true; private isDisabled = true; private myForm: FormGroup; priva...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值