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

Question

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

有没有办法在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"]
    }

Answer 1

你可以用ngModel-Forms以最简单的方式做到这一点，或者用RectiveForms和FormArray进行一些困难的方式。

有关Reactive Forms的更多信息，请访问：qazxsw poi

以下是使用https://angular.io/guide/reactive-forms解决方案的简单示例，ngModel是一个工作示例：

第1步：Declate一个Type TextField数组

here

第2步：转换作者数组

editAuthors: any[] = [];

填写新的编辑Authors-Array，您需要创建表单元素。

第3步：功能为您添加按钮

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

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

第4步：提交表格

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

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

第5步：模板

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

通过

 <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-attribute和inputs创建name。使用[(ngModel)]将数据绑定到表单元素。随着author.value添加独特的author.key属性。

完整的TS文件

name