在 Angular 中显示数组对象

Question

我有简单的 angular 表单来保存用户输入。用户可以点击 Add More 按钮添加他们想要的行，这很好。

而且我希望如果 testData（在组件上定义）有长度，那么这个 testData 应该已经在组件初始化上就位，但我不知道该怎么做.

component.ts

import { Component, VERSION, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 productForm: FormGroup;
 testData = [{ "name": "test-1", "age": "24" }, { "name": "test-2", "age": "32" }, { "name": "Test-3", "age": "20" }]
 constructor(private fb: FormBuilder) {}

 ngOnInit() {
   this.addRowData();
   this.productForm = this.fb.group({
   stepName: 'Field Data',
   fieldData: this.fb.array([]) ,
  });
 }

 fieldData() : FormArray {
  return this.productForm.get("fieldData") as FormArray
 }

 newFieldData(): FormGroup {
  return this.fb.group({
   name: '',
   age: '',
  })
 }

 addRowData() {
   this.fieldData().push(this.newFieldData());
 }

 removeRowData(i:number) {
   this.fieldData().removeAt(i);
 }

 onSubmit() {
   console.log(this.productForm.value);
 }
}

index.html

<table formArrayName="fieldData">
    <tr *ngFor="let data of fieldData().controls; let i=index" [formGroupName]="i">
      <td>
          Name :
          <input type="text" formControlName="name" class="form-control">
      </td>
      <td>
          Age:
          <input type="text" formControlName="age" class="form-control">
      </td>
      <td>
          <button (click)="removeRowData(i)" class="btn btn-danger">Remove</button>
      </td>
    </tr>
  <tr>
    <th width="150px"><button type="button" (click)="addRowData()" class="btn btn-primary">Add More</button></th>
  </tr>
</table>

Answer 1

我在 Stackblitz 上为您创建了一个 bug-fixed 样本。

试试这个：

app.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl,Validators,FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 productForm: FormGroup;
 testData = [{ "name": "test-1", "age": "24" }, { "name": "test-2", "age": "32" }, { "name": "Test-3", "age": "20" }]
 constructor(private fb: FormBuilder) {
   this.productForm = fb.group({
     fieldData: this.fb.array([])
   });
 }

 ngOnInit() {
  this.initialize();
 }

get fieldData(): FormArray {
  return this.productForm.get("fieldData") as FormArray;
}

newFieldData() : FormGroup {
  return this.fb.group({
    name: [""],
    age: [""],
  })
}

addNewField(){
  this.fieldData.push(this.newFieldData())
}

removeField(i:number) {
  this.fieldData.removeAt(i);
}

onSubmit() {
  console.log(this.fieldData.value);
}

initialize() {
  if( this.testData.length > 0 ) {
    this.testData.forEach((item) => {
       this.fieldData.push(
         this.fb.group({
            name: [item.name],
            age: [item.age],
          })
        );
      });
    }
  }

}


// angular form is group of controls

app.component.html

<div class="main-container">
  <form [formGroup]="productForm">
    <div formArrayName="fieldData" class="form-array">
      <div *ngFor="let data of fieldData.controls; let i=index">
        <div [formGroupName]="i" class="form-group">
          <div class="name-container">
            <label for="name">Name:</label>
            <input type="text" formControlName="name">
          </div>
          <div class="name-container">
            <label for="name">Age:</label>
            <input type="text" formControlName="age">
          </div>
          <button class="btn btn-danger" (click)="removeField(i)">Remove</button>
        </div>
      </div>
    </div> 
  </form>
  <p>
    <button class="btn btn-success" type="button" (click)="addNewField()">Add</button>
  </p>
</div>

Answer 2

您已经完成了一半，只需修改您的 newFieldData() 方法并传递默认数据参数并检查数据是否存在设置数据，否则设置您已经在做的空值。

 // passing data param with default value null 
 newFieldData(data = null): FormGroup {
   return this.fb.group({
     name: data ? data.name : '', // here you can set value if exists else empty
     age: data ? data.age : '',
 });
}

现在你只需要在你的ngOnInit方法中添加这段代码

if (this.testData.length) {
  this.testData.map((data) => this.fieldData().push(this.newFieldData(data)));
}

就是这样，chekcout 工作 DEMO

在 Angular 中显示数组对象

Display an array object on view in Angular

typescript

angular

angular-reactive-forms

formarray