Question

我使用Angular反应形式创建了一个动态添加/删除行。行被添加和删除。但是如何将所有这些行值从Angular应用程序发送到Java控制器。我粘贴下面的代码。

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）但失败了。我对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。在服务器端，您可以检索String格式的json并将其解析并发送到DB。这是下面的代码

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

  })

    alert("Successful");
  }

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

2 个答案: