在Array Angular 8中添加2个表单控件。

Question

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

我想做一个反应式表单，当我点击一个按钮时，增加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>

站名 是当我按下按钮时创建的新表格（选择）。我想，当我预设的按钮出现也是一个形式（当我可以输入一个数字值）附近的选择形式。

先谢谢你

Answer 1

为了更好的添加动态表单，使用 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>