如何将动态添加的行值从 angular 发送到 java 控制器

Question

我使用 Angular 响应式表单动态创建了 adding/deleting 行。正在添加和删除行。但是如何将所有这些行值从 Angular 应用程序发送到 java controller.I 我正在粘贴下面的代码。

app.component.html

<div class="container">
<h3 class="page-header">Seasons</h3>
<button type="button" class="btn btn-primary" (click)="addTeam()">Add New Row</button><br/>
<form [formGroup] = "seasonsForm">
    <div formArrayName = "teamRows">
        <div *ngFor = "let team of seasonsForm.controls.teamRows.controls; let i=index" [formGroupName] = "i">
            <h4>Team- #{{i+1}}</h4>
            <div class="form-group">
                <label>Team Name</label>
                <input formControlName = "teamName" class="form-control">
            </div>
            <div class="form-group">
                <label>Stadium</label>
                <input formControlName = "stadiumName" class="form-control">
            </div>
            <div class="form-group">
                <label>Capacity</label>
                <input formControlName = "capacity" class="form-control">
            </div>
            <div class="form-group">
                <label>Founded</label>
                <input formControlName = "founded" class="form-control">
            </div>
            <div class="form-group">
                <label>Head Coach</label>
                <input formControlName = "headCoach" class="form-control">
            </div>
            <div class="form-group">
                <label>Last Season</label>
                <input formControlName = "lastSeason" class="form-control">
            </div>
            <button *ngIf = "seasonsForm.controls.teamRows.controls.length" (click) = "deleteTeam(i)" class="btn btn-danger">Delete Button</button>
        </div>
    </div>
</form>
<pre>{{ seasonsForm.value |json }}</pre>
</div>

app.component.ts

    import { Component, OnInit } from '@angular/core';
    import { FormGroup,FormArray,FormBuilder,Validators} from '@angular/forms';
    import { Teams } from '../service/http-client.service';

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

      public seasonsForm: FormGroup;
      public teams:Teams[];

      constructor(private _fb: FormBuilder) { }

      ngOnInit() {
        this.seasonsForm = this._fb.group({
          teamRows: this._fb.array([this.initTeamRows()])
        });
      }

      get formArr() {
        return this.seasonsForm.get('teamRows') as FormArray;
      }

      initTeamRows() {
        return this._fb.group({
          teamName: [''],
          stadiumName: [''],
          capacity: [''],
          founded: [''],
          headCoach: [''],
          lastSeason: ['']
        });
      }

      addTeam() {
        this.formArr.push(this.initTeamRows());
      }

      deleteTeam(index: number) {
        this.formArr.removeAt(index);
      }

    }

createTeam(): void {
    this.httpClient.post<Teams>("http://localhost:8080/addTeam", seasonsForm);
      .subscribe( res => {
        alert("Successful");
      })
  };


export class Teams {
  constructor(
    public teamName:string,
    public stadiumName:string,
    public capacity:string,
    public founded:string,
    public headCoach:string,
    public lastSeason:string,
  ) {}

}

我试图发送整个 formGroup(seasonsForm) 但它变得 failed.I 对 Angular 来说相对较新，我在 Google 中搜索但没有找到太多帮助。因此，我们将不胜感激。

Answer 1

您需要在 createTeam 函数上发送表单值。如果你 console.log(seasonsForm)，你可以看到还有一些其他属性只与你的表单有关。另外，如果您愿意，可以检查表格是否有效。

createTeam(): void {
    if(seasonsForm.valid){
        this.httpClient.post<Teams>("http://localhost:8080/addTeam", seasonsForm.value);
          .subscribe( res => {
            alert("Successful");
          })
      };
}

Answer 2

首先，如果您使用的是 NoSQL 数据库，那么您可以发送包含数组的 JSON 文件。所以在这里我决定向服务器端发送一个包含数组值的 json 文件，然后我将表单组名称转换为 JSON.Stringify。在服务器端，您可以检索字符串格式的 json 并解析它并发送到数据库。下面是代码

onSubmit() {
    this.httpClient.post("http://localhost:8080/addTeams",JSON.stringify(this.seasonsForm.value))
  .subscribe((response: Response) => {

  })

    alert("Successful");
  }

如何将动态添加的行值从 angular 发送到 java 控制器

How to send dynamically added row values from angular to java controller

json

angular

angular-reactive-forms