如何使用表单在 Angular 9 模板中填充数组值

Question

.html 页

<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>

.component.ts

{

  constructor(private fb: FormBuilder,
     private elRef: ElementRef,
     private settingservice: SettingsService) {
        this.emp_status = this.fb.group({
          status: [],
          description : []
     });
  }

}

如何在我的模板中填充数组元素？使用这些代码，我得到了空字段。在检查时我在输入字段中获取值，即使它显示空字段

Answer 1

FormArrays 的简要说明

如果我们想要一个像

这样的对象

[
{status:'status 1',description:'description 1'},
{status:'status 2',description:'description 2'},
{status:'status 3',description:'description 3'},
   ...
]

我们有一个对象数组，所以我们需要一个 FormGroups (*) 的 FormArray。要创建它很有用，它有一个函数 return 一个 FormGroup（FormArray 的一个元素）

createGroup():FormGroup
{
   return new FormGroup({
      status:new FormControl(),
      description:new FormControl(),
   })
}

如果我们的 FormArray 属于一个 FormGroup，它有一个 getter 函数是有用的 return 我们的 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，但我们有一个函数 return 一个 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()))

嗯，看在.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">

现在，我们创建一个辅助函数

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

如何使用表单在 Angular 9 模板中填充数组值

How to populate Array values in angular9 template using forms

angular

angular9

.html 页

.component.ts