我创建了一个包含文本字段和下拉列表的 HTML 表单,它也可以动态创建。当我单击提交按钮时,它只取一个组件的值,而不取另一个文本字段的值。两者的表单控件名称相同。但我得到了一个控制的价值。
HTML:-
<div class="container">
<p> </p>
<div>
<form [formGroup]="searchForm" novalidate (ngSubmit)="submit()">
<div formArrayName="properties">
<div *ngFor="let prop of searchForm.get('properties').controls; let i = index" >
<input type="text" class="form-control" [formControlName]="i">
<select class="form-control" [formControlName]="i">
<option value="x">x</option>
<option value="y">y</option>
<option value="xy">xy</option>
<option value="z">z</option>
</select>
<button *ngIf="searchForm.controls['properties'].length > 1 " (click)="onDelProperty(i)">Delete</button>
</div>
</div>
<p>
</p>
<a (click)="onAddProperty()">Add</a>
<button class="btn btn-bold btn-primary" type="submit">submit</button>
</form>
</div>
</div>
零件:-
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
import { IcoService } from '../../services/ico.service';
import { debug } from 'util';
@Component({
selector: 'app-team',
templateUrl: './team.component.html',
styleUrls: ['./team.component.css']
})
export class TeamComponent implements OnInit {
searchForm: FormGroup;
constructor(private fb: FormBuilder,private icoService: IcoService,) { }
ngOnInit() {
this.searchForm = this.fb.group({
properties: this.fb.array([])
});
this.onAddProperty(); //calling this first time so that by default input components will be there and single user should be added
}
submit() {
console.log(this.searchForm.value);
debugger
this.icoService.teamDetail(this.searchForm.value).subscribe((result) => {
console.log()
}, (err) => { console.log('err',err) })
}
onAddProperty() {
for(var i=1; i<=1; i++) {
(this.searchForm.get('properties') as FormArray).push(new FormControl());
}
}
onDelProperty(index:any) {
for(var i=1; i<=1; i++) {
(this.searchForm.get('properties') as FormArray).removeAt(index);
}
}
}