解决方案如下:
ReactiveFormsModule
模块,以使用嵌套表单和自动补全输入功能。import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
]
})
export class AppModule { }
FormArray
来表示n个自动补全输入。import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'app-nested-form',
templateUrl: './nested-form.component.html',
styleUrls: ['./nested-form.component.css']
})
export class NestedFormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
autoCompleteInputs: this.fb.array([])
});
}
get autoCompleteInputs() {
return this.form.get('autoCompleteInputs') as FormArray;
}
addAutoCompleteInput() {
const autoCompleteInput = this.fb.group({
inputText: ['']
});
this.autoCompleteInputs.push(autoCompleteInput);
}
removeAutoCompleteInput(index: number) {
this.autoCompleteInputs.removeAt(index);
}
}
formArrayName
指令来设置FormArray
的名称,并使用*ngFor
指令来循环显示自动补全输入。
以上示例演示了如何使用Angular的嵌套表单和FormArray
来实现n个自动补全输入。你可以根据自己的需求进一步定制和优化这个示例。
下一篇:Angular嵌套的承诺未完成