1. 什么是FormArray
FormArray是Angular中的一个form组成部分，它是一个FormGroup的数组。FormArray是一种可重复的组件，通常用来处理表单中可变数量的控件。比如，我们可以使用FormArray来实现一个动态的复选框列表。在Angular中，FormArray可以让我们更方便地使用数据创建复杂的表单（比如一个里面包含多个表格数据的表单）。我们可以通过在组件类中定义一个FormArray类型的属性来初始化FormArray，然后在模板中用FormControlName来绑定它。
2. 什么是模态框
模态框是一个弹出式的窗口，在网页中常用于显示一些提示信息，或者让用户对信息进行操作。模态框与对话框类似，但是通常要比对话框简单。模态框中的内容通常是响应用户操作而发生变化的，比如弹出一个表单，让用户输入信息，然后在表单提交后关闭模态框。模态框通常通过调用Bootstrap的Modal插件来实现。
3. 如何结合使用FormArray和模态框
3.1. 在模板中使用FormArray
要让一个组件使用FormArray，首先需要在组件的构造函数中创建一个FormGroup和FormArray的实例。下面是一个示例：
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
<form [formGroup]="myForm">
<div formArrayName="items">
<div *ngFor="let item of myForm.get('items').controls; let i=index">
<div [formGroupName]="i">
<input formControlName="name" />
</div>
</div>
</div>
</form>
`,
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([ this.createItem() ])
});
}
createItem(): FormGroup {
return this.fb.group({
name: ''
});
}
}
这个组件包含一个form控件和一个FormArray类型的控件，items。我们使用formArrayName和formGroupName来在模板中绑定每个控件。使用FormBuilder来创建FormGroup和FormArray控件。在createItem方法中，我们可以添加一些默认值或者完成其他表单处理。
3.2. 在模态框中使用FormArray
模态框通常是弹出一个对话框，让用户输入信息，然后将信息提交到服务器。在模态框中使用FormArray，通常需要在模态框组件中创建一个FormGroup和FormArray的实例，然后在模板中绑定到控件上。下面是一个示例：
import { Component, Input } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
template: `
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">{{ title }}</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Close click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="myForm">
<div formArrayName="items">
<div *ngFor="let item of myForm.get('items').controls; let i=index">
<div [formGroupName]="i">
<input formControlName="name" />
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="activeModal.close(myForm.value)">Ok</button>
<button type="button" class="btn btn-outline-dark" (click)="activeModal.dismiss('Cancel click')">Cancel</button>
</div>
`
})
export class MyModalComponent {
@Input() title: string;
myForm: FormGroup;
constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([ this.createItem() ])
});
}
createItem(): FormGroup {
return this.fb.group({
name: ''
});
}
}
这个组件是一个模态框组件，当用户打开模态框时，会按照模板中的结构显示一个表单，我们需要在组件类中创建一个FormGroup类型的属性myForm，并在模板中绑定到控件上。myForm包含一个items属性，它是一个FormArray类型的控件，其中每个元素是一个FormGroup类型的控件。在createItem方法中，我们可以添加一些默认值或者完成其他表单处理。在模板中，我们使用formArrayName和formGroupName来绑定每个控件。
3.3. 在父组件中打开模态框
在父组件中打开模态框通常需要使用一个模态框服务，比如ng-bootstrap的NgbModal。
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyModalComponent } from './modal.component';
@Component({
selector: 'app-my-form',
template: `
<div class="row">
<div class="col-md-12">
<button (click)="openMyModal()" class="btn btn-outline-dark">Open My Modal</button>
</div>
</div>
`,
})
export class MyFormComponent {
constructor(private modalService: NgbModal) { }
openMyModal() {
const modalRef = this.modalService.open(MyModalComponent);
modalRef.componentInstance.title = 'My Modal';
}
}
在父组件中，我们使用NgbModal来打开模态框。在模态框组件中，我们定义了title属性，我们可以在打开模态框时设置它的值。在模态框中，用户可以输入信息，并点击Ok按钮提交信息。当模态框关闭时，我们可以在父组件中获取信息的值。
参考资料
1. Angular官网文档：https://angular.io/guide/form-array
2. ng-bootstrap官网文档：https://ng-bootstrap.github.io/#/components/modal/examples
以上是对 Angular中怎么结合使用FormArray和模态框的浅析。FormArray以及模态框都是 Angular编写表单时经常使用的技术。通过上述的操作，我们不仅可以方便地创建表单，而且可以让用户通过模态框来输入表单信息。希望对你有所帮助。