在Angular 7中动态添加行以形成表单

在Angular 7中，可以通过动态添加行来形成表单。下面是一个完善且全面的答案：

在Angular 7中，动态添加行以形成表单可以通过以下步骤实现：

创建一个表单组件：首先，创建一个表单组件，可以使用Angular CLI命令ng generate component form来生成一个名为form的组件。
定义表单模型：在组件的类中，定义一个表单模型，用于存储表单数据。可以使用Angular的FormGroup和FormControl来创建表单模型。例如，可以在组件的构造函数中创建一个表单模型：

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(''),
      email: new FormControl('')
    });
  }
}

在上面的例子中，我们创建了一个包含name和email字段的表单模型。

创建表单模板：在组件的模板文件form.component.html中，使用Angular的模板语法来创建表单。可以使用formGroup和formControlName指令来绑定表单模型和表单控件。例如：

<form [formGroup]="form">
  <div>
    <label>Name:</label>
    <input type="text" formControlName="name">
  </div>
  <div>
    <label>Email:</label>
    <input type="email" formControlName="email">
  </div>
</form>

在上面的例子中，我们创建了两个输入框，分别用于输入姓名和电子邮件地址，并使用formControlName指令将它们绑定到表单模型的对应字段。

添加动态行：要实现动态添加行的功能，可以使用FormArray来管理表单中的多个行。在组件的类中，创建一个FormArray实例，并将其添加到表单模型中。例如，可以在组件的构造函数中添加以下代码：

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(''),
      email: new FormControl(''),
      rows: new FormArray([])
    });
  }
}

在上面的例子中，我们创建了一个名为rows的FormArray实例，并将其添加到表单模型中。

添加行的方法：为了能够动态添加行，可以在组件的类中定义一个方法，用于向rows数组中添加新的行。例如，可以添加以下代码：

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(''),
      email: new FormControl(''),
      rows: new FormArray([])
    });
  }

  addRow() {
    const newRow = new FormGroup({
      field1: new FormControl(''),
      field2: new FormControl('')
    });
    (this.form.get('rows') as FormArray).push(newRow);
  }
}

在上面的例子中，我们定义了一个名为addRow的方法，该方法会创建一个新的行，并将其添加到rows数组中。

在模板中调用添加行的方法：最后，在组件的模板文件form.component.html中，可以使用按钮或其他触发事件的元素来调用添加行的方法。例如：

<form [formGroup]="form">
  <!-- 表单字段 -->
  <div>
    <label>Name:</label>
    <input type="text" formControlName="name">
  </div>
  <div>
    <label>Email:</label>
    <input type="email" formControlName="email">
  </div>

  <!-- 动态添加的行 -->
  <div formArrayName="rows">
    <div *ngFor="let row of form.get('rows').controls; let i = index" [formGroupName]="i">
      <input type="text" formControlName="field1">
      <input type="text" formControlName="field2">
    </div>
  </div>

  <!-- 添加行的按钮 -->
  <button type="button" (click)="addRow()">Add Row</button>
</form>

在上面的例子中，我们使用*ngFor指令来循环遍历rows数组，并使用formGroupName指令将每个行绑定到对应的FormGroup。

这样，当点击"Add Row"按钮时，就会动态添加一行到表单中。

总结：通过以上步骤，我们可以在Angular 7中实现动态添加行以形成表单的功能。这种方法可以用于创建动态表单，例如添加多个输入字段或重复的表单元素。在实际应用中，可以根据具体需求进行扩展和定制。

在Angular 7中动态添加行以形成表单

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐