Блог

Я создал динамически добавляющие / удаляющие строки, используя угловые реактивные формы. Строки добавляются и удаляются. Но как вы можете отправить все эти значения строк из приложения 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, но я не нашел большой помощи. Поэтому любая помощь в этом была бы оценена.

вам нужно отправить значение формы в вашей функции createTeam. Если вы используете console.log(seasonsForm), вы можете увидеть, что есть некоторые другие атрибуты, относящиеся только к вашей форме. Также, если вы хотите, вы можете проверить, действительна ли форма.

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

Прежде всего, если вы используете базу данных NoSQL, вы можете отправить файл JSON, содержащий массивы. Итак, здесь я решил отправить файл json, содержащий значения массива, на серверную часть, а затем преобразовал имя группы форм в JSON.Stringify. На стороне сервера вы можете получить этот json в строковом формате, проанализировать его и отправить в базу данных. Вот приведенный ниже код

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

  })

    alert("Successful");
  }