当前位置：首页 > news >正文

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

news 2025/8/10 19:00:13

官网的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));}