在 Angular 4 中创建文本字段列表答案

【问题标题】：Creating a list of textfield in Angular 4在 Angular 4 中创建文本字段列表
【发布时间】：2017-12-20 07:18:21
【问题描述】：

我有一个从文本字段获取输入的数组对象。但是，我想以一种简洁的方式设计文本字段，它只显示一个文本字段，旁边有一个“+”按钮。只有当它被填充并且用户单击按钮时，另一个文本字段才会显示在前一个文本字段下方，依此类推。

有什么方法可以在 Angular 4 中实现这一点吗？

编辑：模型示例

export class Book{
    constructor(
      public id: number,
      public title: string,
      public author: Array<string>){}
}

我希望它具有这样的 json 值：

    {"id": 1,
     "title": "Book A",
     "author": ["personA", "personB", "personC"]
    }

【问题讨论】：

是的，有办法。最简单的是使用 FormArray：angular.io/guide/…
我添加了一个带有简单示例的分析器，但如果您想要一个响应式表单的示例，请告诉我，我会为您创建一个示例。

标签： angular button textfield

【解决方案1】：

您可以使用ngModel-Forms 以最简单的方式完成此操作，或者使用RectiveForms 和FormArray 以简单的方式完成。

您可以在此处找到有关 ReactiveForms 的更多信息：https://angular.io/guide/reactive-forms

这是一个简单的解决方案示例，ngModel here 是一个工作示例：

第 1 步：声明一个 TextField 类型数组

editAuthors: any[] = [];

第 2 步：转换作者数组

ngOnInit() {
    this.bookModel.authors.forEach((author, index) => {
      this.editAuthors.push({ key: 'author'+index, value: author });
    });
  }

填写新的editAuthors-Array，用于创建表单元素。

第 3 步：添加按钮的功能

addNewTextField(index: number) {
    const newTextField: TextField = {
      key: 'textfield' + index,
      value: ''
    }
    this.textfields.push(newTextField);
  }

您可以在此处设置新文本字段的默认值。

第 4 步：提交表单

在这一步中，您应该从 editAuthors-Array 获取值并将其推送到您的 bookModel.authors-Array。

showModel() {
    this.editAuthors.forEach((author, index) => {
      this.bookModel.authors[index] = author.value;
    });
    // do something with new model
  }

第 5 步：模板

 <div>
    <label>Book Tiitle</label>
    <input type="text" name="bookTitle" [(ngModel)]="bookModel.title" />
  </div>

  <div *ngFor="let author of editAuthors;">
    <label>Author</label>
    <input type="text" [(ngModel)]="author.value" [name]="author.key" />
  </div>

  <button (click)="addNewAuthor()">Add new Author</button>
  <button type="submit" (click)="showModel()">Submit</button>

遍历editAuthors。比使用name-attribute 和[(ngModel)] 创建inputs。使用author.value 将数据绑定到表单元素。使用author.key 添加唯一的name-属性。

完整的 TS 文件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  bookModel = {
    id: 1,
    title: 'Book 1',
    authors: [
      'Author 1',
      'Author 2',
      'Author 3'
    ]
  };

  editAuthors: any[] = [];

  ngOnInit() {
    this.bookModel.authors.forEach((author, index) => {
      this.editAuthors.push({ key: 'author'+index, value: author });
    });
  }

  addNewAuthor() {
    this.editAuthors.push({ key: 'author'+this.editAuthors.length+1, value: '' });
  }

  showModel() {
    this.editAuthors.forEach((author, index) => {
      this.bookModel.authors[index] = author.value;
    });
    console.log(this.bookModel);
  }

}

【讨论】：

我的模型有几个属性，其中一个是数组。我只想为这个特定属性设置文本字段。该怎么做？
@OreoFanatics 你可以发布你的模型示例吗？
@OreoFanatics 我已经更新了我的答案和工作示例