下面是一个解决Angular 7和Angular Material表格中为每一行生成下拉列表表单控件时出现错误的示例解决方法:
MatSelectModule
和ReactiveFormsModule
模块:import { MatSelectModule } from '@angular/material/select';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// ...
MatSelectModule,
ReactiveFormsModule
],
// ...
})
export class YourModule { }
FormBuilder
创建一个表单控件,并在每一行中为每个下拉列表创建一个表单控件。import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
// ...
})
export class YourComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.form = this.formBuilder.group({
// ...
dropdowns: this.formBuilder.array([])
});
// 假设有一个数组用于存储下拉列表选项
const dropdownOptions = ['Option 1', 'Option 2', 'Option 3'];
// 在每一行中为每个下拉列表创建表单控件
for (let i = 0; i < numRows; i++) {
const dropdown = this.formBuilder.control('', Validators.required);
this.dropdowns.push(dropdown);
}
}
get dropdowns() {
return this.form.get('dropdowns') as FormArray;
}
// ...
}
formControlName
属性。
请注意,上面的代码示例假设您已经定义了numRows
和rows
变量,并且已经创建了一个包含下拉列表选项的数组dropdownOptions
。
根据您的实际需求进行相应的修改。同时,确保在导入Angular Material的MatSelectModule
和ReactiveFormsModule
模块后,使用npm install
安装了相关的依赖项。