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>
站名 是当我按下按钮时创建的新表格(选择)。我想,当我预设的按钮出现也是一个形式(当我可以输入一个数字值)附近的选择形式。
先谢谢你
为了更好的添加动态表单,使用 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>