[英]How to populate Array values in angular9 template using forms
<pre>
<div *ngFor="let data of data;let i=index" class="row_wrap">
<div class="row_inner_wrap">
<div class="row">
<div class="col-md-12">
<div class="col-md-5 inner_row">
<mat-form-field appearance="outline" class="input-container">
<input (click)="readonly($event)" formControlName="status" matInput [value]="data?.employeeStatus" class="form-control" placeholder="{{ 'Status'| translate }}" readonly>
</mat-form-field>
<i class="fa fa-check edit_dept" data-uuid="" data-type="department"></i>
</div>
<div class="col-md-6 inner_row b4_del_header">
<mat-form-field appearance="outline" class="input-container">
<input matInput placeholder="{{ 'description'| translate }}" formControlName="description" (click)="readonly($event)" [value]=" data?.description" class="form-control" readonly>
</mat-form-field>
<div class="add_des_edit">
<div class="update_icon">
<i class="fa fa-check edit_dept" data-uuid="" data-type="department"></i>
</div>
</div>
</div>
<div *ngIf="!enableEdit" class="del_icon" (click)="ondelete(data?._id)">
<i class="fa fa-trash-o del del_department" aria-hidden="true" style="visibility: visible;" data-uuid=""></i>
</div>
<div class="add_icon" style="display: none"><i class="fa fa-plus add_row" data-uuid=""></i>
</div>
<div *ngIf="enableEdit" class="edit_icon" (click)="onUpdate()" style="display: inline-block;">
<i class="fa fa-check edit_row edit_row_department" data-uuid=""></i>
</div>
</div>
</div>
</div>
</div>
{
constructor(private fb: FormBuilder,
private elRef: ElementRef,
private settingservice: SettingsService) {
this.emp_status = this.fb.group({
status: [],
description : []
});
}
}
如何在模板中填充数组元素? 使用这些代码,我得到了 null 字段。 在检查时我在输入字段中获取值,即使它显示为空字段
关于 FormArrays 的简要说明
如果我们想要一个 object 像
[
{status:'status 1',description:'description 1'},
{status:'status 2',description:'description 2'},
{status:'status 3',description:'description 3'},
...
]
我们有一个 object 数组,所以我们需要一个 FormGroups (*) 的 FormArray。 要创建它,有一个返回 FormGroup(FormArray 的一个元素)的 function 很有用
createGroup():FormGroup
{
return new FormGroup({
status:new FormControl(),
description:new FormControl(),
})
}
如果我们的 FormArray 属于 FormGroup,那么有一个 getter function 会返回我们的 FormArray
form:FormGroup; //<--declare the form
get statusArray():FormArray
{
return this.form.get('emp_status') as FormArray
}
//in ngOnInit
ngOnInit()
{
this.form=new FormGroup({
other_property:new FormControl(),
emp_status=new FormArray([]) //<--see that we create an empty FormArray
})
}
如果只想 FormArray 本身只声明
formArray:FormArray
//in ngOnInit we create the formArray empty -well you can do it in the declaration-
ngOnInit()
{
this.formArray=new FormArray([]) //<--see that we create an empty FormArray
}
现在我们要向数组中添加元素。 请记住,FormArray 的每个元素都是一个 FormGroup,但我们有一个 function 返回一个 formGroup!
所以,我们可以简单地使用
this.statusArray.push(this.createGroup()) //if we are using a formArray inside a FormGroup
this.formArray.push(this.createGroup()) //if we has the formarray standalone
如果我们想在数组中添加 formArray,我们通常将数组“映射”到 FormGroup 并创建数组,puff。 想象一下你有一个数据数组,你可以做
this.form=new FormGroup({
other_property:new FormControl(),
emp_status=new FormArray(
this.data.map(x=>this.createGroup()) //<--each element of this data
//like a formGroup
)
})
//or with our standalone FormArray
this.formArray=new FormArray(this.data.map(x=>this.createGroup()))
嗯,看in.html
首先检查是否一切正常
<pre>
{{form?.value|json}}
</pre>
//or
<pre>
{{formArray.value|json}}
</pre>
我们正在使用输入和 div
如果在 FormGroup 中
<form [formGroup]="form">
<!--say to Angular we are going to use the formArray using formArrayName-->
<div formArrayName="emp_status">
<!--iterate over the controls of formArray and use [formGroupName]-->
<!--see that we use our getter function-->
<div *ngFor="let group of statusArray.controls;let i=index" [formGroupName]="i">
<!--use formControlName, we are yet in a formGroup-->
<input formControlName="status">
<input formControlName="description">
</div>
</div>
</form>
如果 FormArray 是独立的,则严格模式存在问题。 在我们可以使用之前
/**BEFORE***/
<div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
现在,我们创建一个辅助 function
getGroupAt(index)
{
return this.formArray.at(index) as FormGroup
}
<form [formGroup]="formArray">
<!--iterate over the controls of formArray and use [formGroup]-->
<div *ngFor="let group of formArray.controls;let i=index" [formGroup]="getGroupAt(i)">
<!--use formControlName, we are yet in a formGroup-->
<input formControlName="status">
<input formControlName="description">
</div>
</div>
</form>
你可以在stackblitz中看到
更新了如何填充给定的数组数据
还记得我们写this.formArray=new FormArray(this.data.map(x=>this.createGroup()))
时候吗?
写什么呢
this.formArray=new FormArray(this.data.map(x=>this.createGroup(x)))
?
好吧,将函数 createGroup 更改为类似
createGroup(data:any=null):FormGroup
{
data=data || {status:null,description:null}
return new FormGroup({
status:new FormControl(data.status),
description:new FormControl(data.description),
})
}
结尾
(*) 如果我们只想管理数字数组或字符串数组,FormArray 可以是 FormControls 的 FormArray
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.