1

我创建了一个包含文本字段和下拉列表的 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);
    }
  }

}
4

0 回答 0