在Angular6中,可以使用JSON模式表单来处理数组项。下面是一个示例代码,演示如何实现一个包含数组项的表单。
首先,创建一个名为app.component.ts
的组件文件,其中包含一个表单的模型和初始值:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
name: new FormControl(''),
emails: new FormArray([
new FormControl('')
])
});
}
addEmail() {
const emails = this.myForm.get('emails') as FormArray;
emails.push(new FormControl(''));
}
removeEmail(index: number) {
const emails = this.myForm.get('emails') as FormArray;
emails.removeAt(index);
}
onSubmit() {
console.log(this.myForm.value);
}
}
接下来,创建一个名为app.component.html
的模板文件,用于显示表单和相应的控件:
最后,可以在项目的根模块中导入和使用ReactiveFormsModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,就可以使用ng serve
命令运行应用程序,并在浏览器中查看表单,添加和删除数组项。当提交表单时,会在控制台打印表单的值。