Добавьте 2 элемента управления формы в массив Array Angular 8

Question

Я новичок ie до angular, поэтому заранее прошу прощения. :)

Я пытаюсь создать реактивные формы, которые добавляют 2 новые формы, когда я нажимаю кнопку. До сих пор мне удавалось добавить только одну форму, когда я нажимал кнопку, и я понятия не имел, как добавить вторую форму.

Вот код ts для одной новой формы

    routeForm = this.fb.group({
  name: ['', Validators.required],
  departureDate: [''],
  arrivalDate: [''],

  stationsName: this.fb.array([
    this.fb.control('')
  ])
});


get stationsName(){
  return this.routeForm.get('stationsName') as FormArray; 
}

addNewStationName(){
  this.stationsName.push(this.fb.control(''));
}

Здесь fb - это FormBuilder

, а HTML код

<div formArrayName="stationsName">
          <button (click)="addNewStationName()">Add new Station</button>

          <div *ngFor="let station of stationsName.controls; let i=index">
            <label>Station1 {{i+1}}</label>
            <select [formControlName]="i">
                <option [ngValue]="null">Select Station</option>
                <option *ngFor="let station of responseStations">{{station.name}}</option>
            </select>
          </div>
        </div>

Stationname - это новая форма (выберите), которая создается, когда я нажимаю кнопку. Мне бы хотелось, чтобы когда я нажимал кнопку, рядом с формой выбора появлялась также форма (когда я могу набирать числовые значения).

Заранее благодарим вас!

Answer 1

Для добавления динамических c форм лучше использовать this.formbuilder.FormGroup({}). Затем он будет организован в основной группе форм

Следующий код с надеждой выполнит вашу работу :) Демо

export class AppComponent implements OnInit {
  routeForm : FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.routeForm = this.formBuilder.group({
        stationsName: new FormArray([])
    });
  }

  get f() {
    return this.routeForm .controls;
  }
  get stationsName() {
    return this.f.stationsName as FormArray;
  }

  addNewStationName() {
    this.stationsName.push(
      this.formBuilder.group({
        stations: ['', []],
        numbersField: ['', []]
      })
    );
  }

  submit() {
   console.log(this.routeForm.value)
  }
}

<form [formGroup]="routeForm ">
    <div formArrayName="stationsName">
        <button (click)="addNewStationName()">Add new Station</button>

        <div *ngFor="let station of stationsName.controls; let i=index">
            <div [formGroup]="station" class="form-row">
                <label>Station1 {{i+1}}</label>
                <select formControlName="stations" >
                    <option value="">Select station</option>
                    //add your list
                    <option *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">{{i}}</option>
                </select>

                <label> Enter number </label>
                <input type="number" formControlName="numbersField" class="form-control"/>
            </div>
        </div>
    </div>
    <button (click)="submit()">submit</button>
</form>