Add 2 form controls in form Array Angular 8

Question

i am newbie to angular so i apologize in advance. :)

I am trying to do a reactive forms that adds 2 new forms when i click a button. Till now i succeeded to add only one form when i click the button and i have no idea how to add the second form.

Here is the ts code for one new form

    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(''));
}

Here fb is a FormBuilder

And the HTML code

<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 is the new form (select) that is created when i press the button. I would like that when i pres the button to appear also a form (when i can type a number values) near the select form.

Thank you in advanced!

Answer 1

To add dynamic forms better using this.formbuilder.FormGroup({}). Then it would be organized under the main formgroup

Following code will get your work done hopefully :) Demo

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>