如何在angular 6中动态添加输入字段

在Angular 6中动态添加输入字段可以通过以下步骤实现：

创建一个组件，用于表示动态添加的输入字段。可以命名为DynamicInputComponent。
在DynamicInputComponent的模板中，使用Angular的表单控件来表示输入字段。可以使用FormControl或ngModel来处理输入值。
在父组件中，引入DynamicInputComponent，并在模板中使用ngFor指令来循环创建多个DynamicInputComponent实例。
在父组件的类中，创建一个数组来存储动态添加的输入字段的值。可以使用FormArray或普通的数组来存储。
在父组件的模板中，使用ngModel和ngModelChange来绑定动态添加的输入字段的值到数组中。

下面是一个示例代码：

创建DynamicInputComponent：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dynamic-input',
  template: `
    <input [(ngModel)]="value" (ngModelChange)="onChange()">
  `
})
export class DynamicInputComponent {
  @Input() value: string;
  @Input() onChangeCallback: Function;

  onChange() {
    this.onChangeCallback(this.value);
  }
}

在父组件中使用DynamicInputComponent：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-parent-component',
  template: `
    <form [formGroup]="form">
      <div formArrayName="inputs">
        <div *ngFor="let input of inputs.controls; let i = index">
          <app-dynamic-input [value]="input.value" [onChangeCallback]="updateValue.bind(this, i)"></app-dynamic-input>
        </div>
      </div>
      <button (click)="addInput()">Add Input</button>
    </form>
  `
})
export class ParentComponent {
  form: FormGroup;
  inputs: FormArray;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      inputs: this.fb.array([])
    });
    this.inputs = this.form.get('inputs') as FormArray;
  }

  addInput() {
    this.inputs.push(this.fb.control(''));
  }

  updateValue(index: number, value: string) {
    this.inputs.at(index).setValue(value);
  }
}

在上面的示例中，我们使用了Angular的表单控件来处理输入字段，并使用FormArray来存储动态添加的输入字段的值。通过ngFor指令循环创建DynamicInputComponent实例，并将输入字段的值绑定到父组件的数组中。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和验证。另外，你可以根据具体需求来调整代码，比如添加删除输入字段的功能、自定义验证等。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。你可以在腾讯云官网上找到更多关于这些产品的详细介绍和文档。

腾讯云云服务器（CVM）介绍链接：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL介绍链接：https://cloud.tencent.com/product/cdb