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

最新推荐文章于 2023-08-16 15:29:18 发布
最新推荐文章于 2023-08-16 15:29:18 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： NG-ZORRO angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallnut/article/details/108487363
版权

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进行数据回显，从而避免浏览器警告的问题(数据属性名要与表单名称相对应)
在这里插入图片描述
希望能够帮到遇到相同问题的朋友

花心小坚果
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nz-schema-form:基于JSON-Schema的ng-zorro-antd表单生成
04-26
停止维护， 提供一种更高效、更符合标准、更可靠的基于 JSON Schema的动态表单。 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 our email address) Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce
ng-alain表单使用方式详解
08-27
在上面的示例中，我们使用ngModel来绑定输入框的值到数据模型中，并使用nz-form-item和nz-form-control来构建表单控件。 二、响应式表单 响应式表单是一种使用JavaScript代码来构建表单的方式，在ng-alain中，可以...
ngModel和formControlName处理表单控件
最新发布
weixin_45678402的博客
08-16 456
ngModel和formControlName处理表单控件
nz-form使用实例(ngModel、ngModelChange)
weixin_44580808的博客
08-04 1785
<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
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...
Angular2~6 [(ngModel)] 与 formControlName 共存 （实用）
chelen_jak的专栏
06-12 2929
原文出处：https://www.jianshu.com/p/6d075cc506a0 延伸阅读：ngular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】 sku-info.html <form [formGroup]="form"> <div> <input [(ngModel)]="it...
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
12-03
Angular,Ng-Zorro框架nz-icon组件加载第三方SVG图标示例代码，完整工程文件夹。html图标书写格式：<i nz-icon [nzType]="'hello:computer'"></i>
解决angular双向绑定无效果,ng-model不能正常显示的问题
10-17
在AngularJS中，双向数据绑定是其核心特性之一，它使得视图（View）与模型（Model）之间的数据可以实时同步。然而，在实际开发中，可能会遇到双向绑定无效果、`ng-model`不能正常显示的问题。本文将深入探讨这个问题...
nz-themes:ng-zorro-antd 动态主题切换演示
05-31
为开发服务器运行ng serve 。 导航到http://localhost:4201/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name来生成一个新的组件。 你也可以使用ng ...
formControlName 要不要加[ ]
qqqgg的专栏
03-17 4188
在angualr 官网教程中，响应式表单的formControlName 这个指令，加了[ ],使用时，学他也加上了，怎么也不出效果。后来去掉可以了。 教程中可以，是因为他在前端定义了name= formcontrol(''), 可以写成[formControl]='name'. 教程下面给出这样的做法： profileForm =...
使用ngModel的时候出现报错怎么解决？
u010328533的博客
10-25 1060
在Angular中的表单中使用ngModel做双向数据绑定时，出现报错Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. <div class="card"> <div class="card-header">添加用户</div> <div class="card-...
angular4 form 表单中 input输入框的disabled属性 (实用）
chelen_jak的专栏
01-03 6233
原文出处：https://www.cnblogs.com/leiting/p/8603604.html 直接加[disabled]="isDisabled"属性的话，出现报错 根据提示，做如下修改 ts private isEdit: boolean = true; private isDisabled = true; private myForm: FormGroup; priva...
细说 Angular 2+ 的表单（二）：响应式表单
weixin_34344403的博客
06-13 402
细说 Angular 2+ 的表单（一）：模板驱动型表单 响应式表单 响应式表单乍一看还是很像模板驱动型表单的，但响应式表单需要引入一个不同的模块： ReactiveFormsModule 而不是 FormsModule import {ReactiveFormsModule} from "@angular/forms"; @NgModule({ // 省略其他 imports: [....
nz-form inline 模式下多类型控件打乱布局的问题
chanchaw的专栏
07-12 863
nzForm 布局被打乱 nz-form 布局被打乱的原因 表单样式使用行内：[nzLayout]="'inline'" 表单中使用多中类型的控件（input、datepicker、select…） 会出现日期选择控件没有充满，同时 select 控件会被挤到下一行，看看下面的效果 使用官方的样式类设置统一宽度解决 在模板对应的CSS中使用下面的样式设置统一宽度 /* 通过设...
前端schema表单配置生成方案
逸尘的专栏
01-04 8897
一、背景 表单Form开发，尤其在中台项目中，是FE????的家常便饭，一般需要大量的重复性工作????： • 编写模板 • 编写校验规则 • 表单提交（偶尔联动） 同时，Server也需要编写校验规则。然而，伴随业务变更和前后端开发同步不及时的情况，前后端校验规则可能会存在不一致的问题。所以「前后端共用校验规则」也可在范畴之内。 二、目标 减少重复性工作????：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关。 三、方案选型 1.form-render 2019年10月阿里开源，基于Rea
Angular 使用移动端ion-modal还有ion-popover组件在pad横向的时候会出现不兼容的问题，推荐使用Angular 之 Overlay
不见来去的博客
08-03 406
ion-modal组件在横向使用pad的时候，弹层是出不来的，已实践特此记录一下 ion-popover组件在横向使用pad的时候，弹出层能出来，但是滚动是有问题。 所以博主发现这些ionic提供的组件虽然好用但是有些场景的兼容性还是有待考究的 **后来博主发现Angular 提供的组件开发包就非常的强大，使用起来页非常的简单，完全可以满足使用的需求** ![在这里插入图片描述](https://img-blog.csdnimg.cn/d4d212fbf6ea48369418d7ea361787ce..
<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
在使用 TypeScript 编写上述表单时，你可以这样写： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-search-form', templateUrl: './search-form.component.html', styleUrls: ['./search-form.component.css'] }) export class SearchFormComponent { q = { ajmc: '', ajbh: '', }; onSubmit() { // 处理表单提交事件 } onReset() { this.q.ajmc = ''; this.q.ajbh = ''; } } ``` 在这个例子中，我们使用了 Angular 框架来构建组件。在组件类中，我们定义了一个 `q` 对象来存储表单中的数据。当提交表单时，我们可以在 `onSubmit` 方法中处理表单提交事件，当重置表单时，我们可以在 `onReset` 方法中将 `q` 对象中的属性值设置为空字符串，从而实现表单重置的功能。 在 HTML 文件中，你可以这样写： ```html <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-group> <input nz-input width="200px" [(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" [(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'">查询</button> <button nz-button type="button" class="mx-sm" (click)="onReset()">重置</button> </nz-col> </nz-row> </form> ``` 在这个例子中，我们使用 `(ngSubmit)` 指令来监听表单的提交事件，并在事件发生时调用组件类中的 `onSubmit` 方法。在重置按钮中，我们使用 `(click)` 指令来监听按钮的点击事件，并在事件发生时调用组件类中的 `onReset` 方法。注意，重置按钮的类型应该为 `type="button"`，这样可以避免表单的提交事件被触发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值