Angular 7，动态地为表单数组控件赋值

Question

在角度 7 中，我正在尝试使用一些初始值制作可编辑的形式。我创建了一个表单组，它也具有表单数组。我正在尝试在表单数组中将值动态分配给表单控件，但表单控件值未显示在表单上。

这是我的 html，

<form [formGroup]="UserForm" (ngSubmit)="submit()" >
<ng-container>
<span>Group Name</span>
<mat-form-field id="uName">
<input matInput autocomplete="off" formControlName="GroupName">
</mat-form-field>
</ng-container>
<br>
<span>User Details</span>
<br> 
<div id="divUser"> 
<table mat-table [dataSource]="UserData" class="mat-elevation-z8" formArrayName="UserRow">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id </th>
<td mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
{{index + 1}}.
</td>         
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef>Server Name</th>
<td mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
<mat-form-field>
<input matInput formControlName="username" autocomplete="off">  // this is showing blank fields
</mat-form-field>  
</td>         
</ng-container>
<tr mat-header-row *matHeaderRowDef="UserColumns"></tr>
<tr mat-row *matRowDef="let row; columns: UserColumns;"></tr>
</table>   
</div> 
<button mat-raised-button type="submit" color="primary">Submit</button>
</form>

和组件代码，

export class AdmissionComponent implements OnInit {
public UserForm: FormGroup;
public UserData;
public UserColumns = ['id','username']  
constructor(private formservice: AdmissionService,private formBuilder: FormBuilder) { }
ngOnInit() {
this.getservicedata('FIRST')
this.UserForm = this.formBuilder.group({
GroupName: new FormControl(),     
UserRow: this.formBuilder.array([this.CreateUser()])      
});
}
onsetValue(result): void { 
this.UserForm.controls['GroupName'].setValue(result.data[0].GroupName) // This is working and showing on html.      
for (var key in result.data[0].usersRow) {
if (key != '0'){ this.fnUserAdd(); }      
// this.UserForm.value.UserRow[key].username = result.data[0].usersRow.username; // this is not working.
this.UserForm.value.UserRow[key].username = 'testing'; // this is not wroking either
};
console.log(this.UserForm.value) // BUT this is perfactly showing data after setting up the values.
}
fnUserAdd(){
(this.UserForm.get('UserRow') as FormArray).push(this.CreateUser());
return this.getUserData();
}
getUserData(){
this.UserData = this.UserForm.get('UserRow').value;
}
CreateUser(): FormGroup {
return this.formBuilder.group({
username: '',
userrole: '',      
present:''
})
}
getservicedata(UserId){    
return this.admiserv.getDetails(UserId)
.subscribe(
result => {
this.onsetValue(result)         
});
}
submit(){
console.log(this.UserForm.value)
}
}

它在 html 上显示空白输入字段，当我输入一些值并单击提交时，它可以工作并将值发送到函数，但不在输入字段中显示初始值。

请建议如何解决此错误。

谢谢

Answer 1

始终使用 setValue 或 pathValue- 为 FormControl、FormArray 或 FormGroup 提供值。所以，我建议你想写一些类似的东西

const array=this.UserForm.get('UserRow') as FormArray;
for (var row of result.data[0].usersRow) {
array.push(this.CreateUser());
array.at(array.length-1).setValue(row)
//or array.at(array.length-1).setPathValue({username:'test'})
}

真的，我建议你改变你的函数 创建用户

CreateUser(data:any): FormGroup {
data={username:'',userrole:'',present:'',...data}
return this.formBuilder.group({
username: data.username,
userrole: data.userrole,      
present:data.present
})
}

所以你可以简单地

const array=this.UserForm.get('UserRow') as FormArray;
for (var row of result.data[0].usersRow) {
array.push(this.CreateUser(row));
//or array.push(this.createUser({username:'test'})
}

如果要创建一个空的表单组，请调用

this.CreateUser(null)

查看堆栈闪电战