NGZORRO:动态表单/模型驱动 的相关问题

官网的demo的[nzFor]="control.controlInstance",似乎是靠[formControlName]="control.controlInstance"来关联的。

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"><nz-form-item *ngFor="let control of listOfControl; let i = index"><nz-form-label [nzXs]="24" [nzSm]="4" *ngIf="i === 0" [nzFor]="control.controlInstance">Passengers</nz-form-label><nz-form-control[nzXs]="24"[nzSm]="20"[nzOffset]="i === 0 ? 0 : 4"nzErrorTip="Please input passenger's name or delete this field."><inputclass="passenger-input"nz-inputplaceholder="placeholder"[attr.id]="control.id"[formControlName]="control.controlInstance"/><spannz-iconnzType="minus-circle-o"class="dynamic-delete-button"(click)="removeField(control, $event)"></span></nz-form-control></nz-form-item><nz-form-item><nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }"><button nz-button nzType="dashed" class="add-button" (click)="addField($event)"><span nz-icon nzType="plus"></span>Add field</button></nz-form-control></nz-form-item><nz-form-item><nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }"><button nz-button nzType="primary">Submit</button></nz-form-control></nz-form-item></form>

ngzorro的[nzFor]是根据什么关联的?id还是name?

ng-zorro的[nzFor]指令是根据id属性进行关联的,而不是name属性。 [nzFor]指令用于在ng-zorro组件中循环遍历数据。你可以通过指定一个数组,然后使用id属性将数组的每个元素与ng-zorro组件中的某个元素进行关联。这样,你就可以在ng-zorro组件中使用该元素的属性和数据。

angular的fromGroup的addControl()可以传入什么参数?分别代表什么

Angular中的`FormGroup`的`addControl()`方法用于向FormGroup中添加FormControl或FormGroup对象。它可以传入两个参数:控件名称和控件对象。

控件名称是一个字符串,用于标识该控件。这个名称通常与表单模板中的表单控件的名称属性相对应。

控件对象可以是一个FormControl或一个FormGroup对象。FormControl是一个表示单个表单控件的类,而FormGroup是表示一组相关表单控件的类。

示例代码如下:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';@Component({selector: 'my-app',template: `<form [formGroup]="myForm"><input formControlName="name" placeholder="Name"></form>`
})
export class AppComponent {myForm: FormGroup;constructor() {this.myForm = new FormGroup({});this.myForm.addControl('name', new FormControl(''));}
}

在上面的示例中,我们创建了一个FormGroup对象`myForm`,并在其中添加了一个名为"name"的FormControl控件。

请注意,`addControl()`必须在FormGroup对象创建后立即调用,即在构造函数或ngOnInit生命周期钩子中调用。对FormGroup对象进行任何其他操作(例如使用removeControl()删除控件)都应该在调用addControl()之后完成。

个人理解的误区

新增一个formControl,只需要 他的name 和 一个FromControl实例

这个实例不关心你是什么标签,他们之间只通过name产生联系

addField(e?: MouseEvent): void {if (e) {e.preventDefault();}const id = this.listOfControl.length > 0 ? this.listOfControl[this.listOfControl.length - 1].id + 1 : 0;const control = {id,controlInstance: `passenger${id}`};const index = this.listOfControl.push(control);console.log(this.listOfControl[this.listOfControl.length - 1]);this.validateForm.addControl(this.listOfControl[index - 1].controlInstance,new UntypedFormControl(null, Validators.required));}

control.updateValueAndValidity({ onlySelf: true });的onlySelf: true是什么意思

在Angular中,`updateValueAndValidity()`是一个用于更新表单控件的值和验证状态的方法。而`onlySelf`是`updateValueAndValidity()`方法的可选参数之一。

当我们调用`updateValueAndValidity()`方法时,它会触发控件的值更新和验证。如果`onlySelf`参数设置为`true`,则只会对当前控件进行值更新和验证,不会对其包含的任何子控件进行更新和验证。

换句话说,当`onlySelf`设置为`true`时,只有当前控件的值和验证状态会被更新,而不会影响其子控件的值和验证状态。

这在处理嵌套表单时非常有用,可以避免递归地更新和验证整个表单,只需针对当前控件进行处理即可。

除此之外的可选参数?

除了onlySelfupdateValueAndValidity方法还有其他可选参数:

  • emitEvent:一个布尔值,用于指定是否在更新值和验证状态后触发值改变事件,默认为true
  • emitModelToViewChange:一个布尔值,用于指定是否在更新值和验证状态后更新视图,默认为true
  • emitViewToModelChange:一个布尔值,用于指定是否在更新视图后更新模型,默认为true

这些可选参数可以根据需要进行配置,以满足不同的业务需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/57049.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vue】Parsing error: No Babel config file detected for ... vue

报错 Parsing error: No Babel config file detected for E:\Study\Vue网站\实现防篡改的水印\demo02\src\App.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.             …

对于git功能的探索与研究

读前提示 注意&#xff1a; 本文只是面向初学者或者之前并未接触过git而想学习如何初步使用git的读者&#xff0c;如果您很擅长使用git&#xff0c;并善于维护远程仓库&#xff0c;那么不建议您看此篇文章&#xff0c;这会浪费您的时间。 当然&#xff0c;这篇文章还是能很好地…

分立式BUCK电路原理与制作持续更新

一、分立式BUCK电路总体原理图 下面改图包含了电压环和电流环。 二、BUCK电路与LDO的区别 LDO不适合在压差大的环境下使用&#xff0c;因为三极管因为CE极承受了压差&#xff0c;压差越大损耗的功率就越大&#xff0c;将三极管换成MOS管&#xff0c;MOS管两端的压差很小所以效…

手机便签内容不见了怎么恢复正常?

在日常生活和工作中&#xff0c;很多人都需要随手记录事情&#xff0c;例如家庭琐事、孩子相关的事情、指定时间需要完成的工作任务、会议安排等。当我们需要随时随地记录事情的时候&#xff0c;手机便签应用就是非常不多的选择&#xff0c;我们直接打开手机上的便签APP就可以新…

CS61B Spring 2021 proj2 gitlet

Gitlet 项目简介整体结构对象概念&#xff08;object concept&#xff09;追踪文件&#xff08;track file&#xff09;分支管理&#xff08;branch management&#xff09;持久化目录结构&#xff08;folder structure&#xff09; 命令功能与具体实现initaddcommitrmloggloba…

Gof23设计模式之组合模式

1.定义 ​组合模式又名部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次。这种类型的设计模式属于结构型模式&#xff0c;它创建了对象组的树形结构。 2.结构 组合模式主要包含三种…

Stable Diffusion 硬核生存指南:WebUI 中的 GFPGAN

本篇文章聊聊 Stable Diffusion WebUI 中的核心组件&#xff0c;强壮的人脸图像面部画面修复模型 GFPGAN 相关的事情。 写在前面 本篇文章的主角是开源项目 TencentARC/GFPGAN&#xff0c;和上一篇文章《Stable Diffusion 硬核生存指南&#xff1a;WebUI 中的 CodeFormer》提…

[golang gin框架] 45.Gin商城项目-微服务实战之后台Rbac微服务之角色权限关联

角色和权限的关联关系在前面文章中有讲解,见[golang gin框架] 14.Gin 商城项目-RBAC管理之角色和权限关联,角色授权,在这里通过微服务来实现角色对权限的授权操作,这里要实现的有两个功能,一个是进入授权,另一个是,授权提交操作,页面如下: 一.实现后台权限管理Rbac之角色权限关…

【JavaEE】Spring Boot - 日志文件

【JavaEE】Spring Boot 开发要点总结&#xff08;3&#xff09; 文章目录 【JavaEE】Spring Boot 开发要点总结&#xff08;3&#xff09;1. 日志有什么作用2. 日志格式2.1 日志框架原理 3. 日志的打印3.1 System.out.println3.2 使用日志框架3.3 日志级别3.3.1 设置默认日志显…

关于接口测试用例设计的一些思考

接口测试发现的典型问题 传入参数处理不当&#xff0c;引起程序错误类型溢出&#xff0c;导致数据读取和写入不一致对象权限校验出错&#xff0c;可获取其他角色信息状态出错&#xff0c;导致逻辑处理出现问题逻辑校验不完善定时任务执行出错 接口测试用例设计 接口测试用例…

Python连接Hive实例教程

一 Python连接hive环境实例 经在网络查询相关的教程&#xff0c;发现有好多的例子&#xff0c;发现连接底层用的的驱动基本都是pyhive和pyhs2两种第三方库的来连接的 hive,下面将简介windows 10 python 3.10 连接hive的驱动程序方式&#xff0c;开发工具&#xff1a;pycharm …

Android 网络协议与网络编程

一、TCP/IP协议 Transmission Control Protocol/Internet Protocol的简写&#xff0c;中译名为传输控制协议/因特网互联 协议&#xff0c;是Internet最基本的协议、Internet国际互联网络的基础&#xff0c;由网络层的IP协议和传输层的TCP 协议组成。协议采用了4层的层级结构。…