Javascript mat表，在带有验证的行中动态添加行和可编辑字段

我刚刚开始研究角度反应式表单，我试图在表单中构建一个表

通过单击表格已添加新功能，新的空行将插入表格中。默认情况下，现有行将处于编辑模式，并将对其进行验证。 表格数据将通过一个保存按钮保存，该按钮位于表格外但在表格内。 我尝试了下面的代码

构造函数（专用路由器：路由器，专用fb:FormBuilder）{}
columnsToDisplay:字符串[]；
数据表；
复制数据列表；
行：FormArray=this.fb.array（[]）；
formGroup:formGroup=this.fb.group（{actualvolumedata:this.rows}）；
恩戈尼尼特（）{
this.columnsToDisplay=['id'，'code'，'desc']；
this.formGroup=this.fb.group({
columns:this.columnsToDisplay，
});
this.copyDataList=[]；
this.dataList=[]；
让列表=[
{
代码：“一”，
描述：'One1'，
身份证号码：1
},
{
代码：“两个”，
描述：“两个1”，
身份证号码：2
},
{
代码:"三",，
描述：“三个一”，
身份证号码：3
},
];
this.copyDataList=新MatTableDataSource（列表）；
this.dataList=新的MatTableDataSource（列表）；
}
onAdd（）{
设newRow={
id:this.dataList.data.length+1，
代码：未定义，
描述：未定义
}
this.copyDataList.data.push（newRow）；
this.dataList=新的MatTableDataSource（this.copyDataList.data）；
}
onSubmit（）{
}

添加
身份证件
{{element.id}
代码
{{element.code}
描述
{{element.desc}}
提交

如何从数据生成格式数组

假设您有一个类似于

[
 {code: 'one',desc: 'One1',id: 1},
 {code: 'two',desc: 'Two1',id: 2},
 {code: 'three',desc: 'Three1',id: 3}
]

要创建formArray，它有一个函数很有用，该函数接收一个对象并返回一个FormGroup

createFormGroup(data):FormGroup
{
   data=data|| {code:'',desc:'',id:0}
   return new FormGroup({
       code:new FormControl(data.code,Validators.required),
       desc:new FormControl(data.desc,Validators.required),
       id:new FormControl(data.id,Validators.required)
   })
}

如果我们用一个对象调用函数，返回一个formGroup，如果我们用null调用函数，也返回一个元素为空的formGroup

当你有了数据，你就可以做简单的事情

this.myFormArray=new FormArray(this.data.map(x=>this.createFormGroup(x)))

即将数据的每个元素转换为formGroup，formArray将是包含这些元素的数组。映射变换“this.createFormGroup（x）”中的每个元素“x”

如果您有返回您订阅的数据的服务

this.myService.getData().subscribe(res=>{
     this.myFormArray=new FormArray(res.map(x=>x.this.createFormGroup(x)))
})

//你的服务有一个类似的方法

getData()
{
     return this.httpClient("http:myUrl")
}

这种方法的好处在于，只需在FormArray中添加一个新元素即可

this.formArray.push(this.createFormGroup(null)) 

除去

this.formArray.removeAt(index)

我有一个关于这一切的小例子。在服务中，我使用的rxjs操作符

通常是一个httpClient.get（url）。只有我把创建表格的部分

注意：我使用FormGroup的构造函数和FormArray的构造函数，但是您可以像这样使用BuildPerform

createFormGroup(data):FormGroup
{
   data=data|| {code:'',desc:'',id:0}
   return this.fb.group({
       code:[data.code,Validators.required],
       desc:[data.desc,Validators.required],
       id:[data.id,Validators.required]
   })
}

和使用

myFormArray=this.fb.array(res.map(x=>x.this.createFormGroup(x)))

你有没有复制错误的stackblitz链接？你在和评论中有一个例子。如果您想要一个关于如何使用箭头键@Eliseo添加/删除行和在输入之间移动的更复杂的示例，我如何使myformArray=new FormArray（[动态。因为我从后端获取数据。从stackoverflow链接我将其作为响应，注释没有足够的空间：）我做了一些更改，但我对html部分有疑问，请您帮助@Eliseoit's将服务更改为返回数据并用作数据源formArray.controls，请参阅您的forked stackblitz。有一些错误，但我很抱歉。我面临的最后一个问题是，我已经用表单包装了表，并在最后放置了一个submit按钮formArray未显示表单的正确有效状态。如果fromArray.valid设置为false，则不会变为true，即使我提供了正确的详细信息。新添加的行是可选的，但一旦您提交了一些值，则整行都是必需的。但formArray.valid不起作用。单个控件工作正常。或stackblitz.com/edit/angular-mqv3d code updated@Eliseocan您是否可以帮助将表格包装到表单中，因为我需要对表单标记进行一些验证？