时间戳

首页 > 解决方案 > 如何在 Angular 中使用 FormGroup 和对象数组

angular - 如何在 Angular 中使用 FormGroup 和对象数组

问题描述

我收到以下 JSON，其中我有一个对象数组，我想访问这个对象的一些属性来制作一个 FormGroup，除了执行初始化表单值的相应功能之外，但我没有不知道怎么做

  {
            "id_interface": 1,
            "id_EquipoOrigen": {
                "id_equipo": 47,
                "nombre": "C65CAN01",
                "localidad": "CAN",
                "categoria": "RGUcore"
            },
            "id_PuertoOrigen": {
                "id_puerto": 2088,
                "nombre": "Gi5/1",
                "ultima_actualizacion": "2019-07-22T08:22:43-04:00"
            },
            "estatus": true,
            "etiqueta_prtg": null,
            "grupo": 0,
            "if_index": 0,
            "bw": 1000,
            "bw_al": 1000,
            "id_prtg": 0,
            "ospf": false,
            "description": "C65CAN01-Gi5/1=RPCA_MT_213-Gi0/1",
            "id_EquipoDestino": {
                "id_equipo": 47,
                "nombre": "C65CAN01",
                "localidad": "CAN",
                "categoria": "RGUcore"
            },
            "id_PuertoDestino": {
                "id_puerto": 1,
                "nombre": "N/A",
                "ultima_actualizacion": "2019-07-22T08:22:19-04:00"
            },
            "ultima_actualizacion": "2019-07-22T15:24:06-04:00"
        },

在此处输入图像描述

特别是，我想添加 ID_EquipoDestino-IdEquipodOrigen 的字段 nombre、localidad、origen 并添加 ID_PuertoDestino-IdPuertodOrigen 的字段 nombren。

我已经编写了一个代码，但是我收到的另一个 JSON 不是对象数组，现在我想将它调整为我收到的对象数组。

InterfaceForm: FormGroup=new FormGroup({               
      id_interface: new FormControl('',Validators.required),
      id_EquipoOrigen:new FormControl('',Validators.required),
      EquipoOrigen:new FormControl(null),
      PuertoOrigen: new FormControl(null),
      id_PuertoOrigen: new FormControl('',Validators.required),
      LocalidadOrigen: new FormControl(null),
      CategoriaOrigen: new FormControl(null),
      estatus: new FormControl(),
      etiqueta_prtg:new FormControl(),
      grupo: new FormControl(),
      if_index:new FormControl(),
      bw:new FormControl(),
      bw_al:new FormControl(),
      id_prtg:new FormControl(),
      ospf:new FormControl(),
      description:new FormControl(),
      id_EquipoDestino:new FormControl('',Validators.required),
      EquipoDestino:new FormControl(null),
      id_PuertoDestino:new FormControl('',Validators.required),
      PuertoDestino:new FormControl(null),
      LocalidadDestino:new FormControl(null),
      CategoriaDestino:new FormControl(null),
      ultima_actualizacion: new FormControl(null),    

    })

    // Funcion que sirve para inicializar el formulario  y colocar los campos en blanco.

    initializeInterfaceFormGroup() { 
      this.InterfaceForm.setValue({
        id_interface:'',
        id_EquipoOrigen:'',
        EquipoOrigen:null,
        id_PuertoOrigen:'',
        LocalidadOrigen:null,
        CategoriaOrigen:null,
        PuertoOrigen:null,
        estatus:'',
        etiqueta_prtg:'',
        if_index: '0',
        grupo:'0',
        bw:'0',
        bw_al:'0',
        id_prtg:'0',
        ospf:'true',
        description:'',
        id_EquipoDestino:'',
        EquipoDestino:null,
        id_PuertoDestino:'',
        PuertoDestino:null,
        LocalidadDestino:null,
        CategoriaDestino:null,
        ultima_actualizacion:null,       
        });
    }

标签： angular

解决方案

如评论中所述，您可以使用FormArray以Form生成Array.

您将 Array 中的每个 Object 映射到FormGroup. 整个数组最终将对应于一个FormArray. 在这种形式中，您还必须提供.push(...)从..removeAt(...)FormArray

在这里，试一试：

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

import { Interface } from './models/data.model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  interfacesForm: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    this.http.get('https://jsonblob.com/api/b0ef0625-b216-11e9-9243-d95533e0ccee')
      .subscribe((data: Interface[]) => {
        this.interfacesForm = this.fb.group({
          interfaces: this.fb.array(data.map(datum => this.generateInterfaceForm(datum)))
        });
      });
  }

  addNewInterface() {
    (<FormArray>this.interfacesForm.get('interfaces')).push(this.generateInterfaceForm({
      id_EquipoOrigen: {},
      id_PuertoOrigen: {},
      id_EquipoDestino: {},
      id_PuertoDestino: {}
    }));
  }

  removeInterfaceAtIndex(index: number) {
    (<FormArray>this.interfacesForm.get('interfaces')).removeAt(index);
  }

  private generateInterfaceForm(interfaceToGenerateFormFor: Interface) {
    return this.fb.group({
      id_interface: [interfaceToGenerateFormFor.id_interface],
      id_EquipoOrigen: this.fb.group({
        id_equipo: [interfaceToGenerateFormFor.id_EquipoOrigen.id_equipo],
        nombre: [interfaceToGenerateFormFor.id_EquipoOrigen.nombre],
        localidad: [interfaceToGenerateFormFor.id_EquipoOrigen.localidad],
        categoria: [interfaceToGenerateFormFor.id_EquipoOrigen.categoria],
      }),
      id_PuertoOrigen: this.fb.group({
        id_puerto: [interfaceToGenerateFormFor.id_PuertoOrigen.id_puerto],
        nombre: [interfaceToGenerateFormFor.id_PuertoOrigen.nombre],
        ultima_actualizacion: [interfaceToGenerateFormFor.id_PuertoOrigen.ultima_actualizacion],
      }),
      estatus: [interfaceToGenerateFormFor.estatus],
      etiqueta_prtg: [interfaceToGenerateFormFor.etiqueta_prtg],
      grupo: [interfaceToGenerateFormFor.grupo],
      if_index: [interfaceToGenerateFormFor.if_index],
      bw: [interfaceToGenerateFormFor.bw],
      bw_al: [interfaceToGenerateFormFor.bw_al],
      id_prtg: [interfaceToGenerateFormFor.id_prtg],
      ospf: [interfaceToGenerateFormFor.ospf],
      description: [interfaceToGenerateFormFor.description],
      id_EquipoDestino: this.fb.group({
        id_equipo: [interfaceToGenerateFormFor.id_EquipoDestino.id_equipo],
        nombre: [interfaceToGenerateFormFor.id_EquipoDestino.nombre],
        localidad: [interfaceToGenerateFormFor.id_EquipoDestino.localidad],
        categoria: [interfaceToGenerateFormFor.id_EquipoDestino.categoria],
      }),
      id_PuertoDestino: this.fb.group({
        id_puerto: [interfaceToGenerateFormFor.id_PuertoDestino.id_puerto],
        nombre: [interfaceToGenerateFormFor.id_PuertoDestino.nombre],
        ultima_actualizacion: [interfaceToGenerateFormFor.id_PuertoDestino.ultima_actualizacion],
      }),
      ultima_actualizacion: [interfaceToGenerateFormFor.ultima_actualizacion],
    });
  }
}

在模板中：

<form [formGroup]="interfacesForm" *ngIf="interfacesForm">
  <div formArrayName="interfaces">
    <div *ngFor="let interface of interfacesForm.controls['interfaces'].controls; let i = index">
      <div [formGroupName]="i">

        <label for="">id_interface</label>
        <input type="text" formControlName="id_interface">
        <br>

        <label for="">estatus</label>
        <input type="text" formControlName="estatus">
        <br>

        <label for="">etiqueta_prtg</label>
        <input type="text" formControlName="etiqueta_prtg">
        <br>

        <label for="">grupo</label>
        <input type="text" formControlName="grupo">
        <br>

        <label for="">if_index</label>
        <input type="text" formControlName="if_index">
        <br>

        <label for="">bw</label>
        <input type="text" formControlName="bw">
        <br>

        <label for="">bw_al</label>
        <input type="text" formControlName="bw_al">
        <br>

        <label for="">id_prtg</label>
        <input type="text" formControlName="id_prtg">
        <br>

        <label for="">ospf</label>
        <input type="text" formControlName="ospf">
        <br>

        <label for="">description</label>
        <input type="text" formControlName="description">
        <br>

        <label for="">ultima_actualizacion</label>
        <input type="text" formControlName="ultima_actualizacion">
        <br>

        <div formGroupName="id_EquipoOrigen">
          <h4>id_EquipoOrigen</h4>

          <label for="">id_equipo</label>
          <input type="text" formControlName="id_equipo">
          <br>

          <label for="">nombre</label>
          <input type="text" formControlName="nombre">
          <br>

          <label for="">localidad</label>
          <input type="text" formControlName="localidad">
          <br>

          <label for="">categoria</label>
          <input type="text" formControlName="categoria">
          <br>
        </div>
        <button (click)="removeInterfaceAtIndex(i)">Remove Interface</button>
        <br>
        <br>
        <hr>
      </div>
    </div>
    <button (click)="addNewInterface()">Add Interface</button>
  </div>
</form>

这是您参考的工作示例 StackBlitz。

推荐阅读