Question

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

有没有办法在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 - 表单以最简单的方式执行此操作，或使用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。而不是使用inputs - 属性和name创建[(ngModel)]。使用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);
  }

}

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

1 个答案: