각도 4의 텍스트 필드 목록 만들기

Question

텍스트 필드에서 입력을 가져 오는 배열 객체가 있습니다. 그러나 텍스트 필드를 깔끔하게 디자인하고 싶습니다. 옆에 '+'버튼이있는 텍스트 필드 하나만 보여줍니다. 채워지고 사용자가 버튼을 클릭 할 때만 다른 텍스트 필드가 이전 텍스트 필드 아래에 표시됩니다.

각도 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와 조금 어려운 방법으로 simpliest 방법으로 그것을 할 수 있습니다 FormArray.

더 ReactiveForms에 대해 당신이 여기에서 찾을 수 있습니다

1 단계 : 여기

https://angular.io/guide/reactive-forms가 ngModelhere와 솔루션에 대한 간단한 예입니다 것은 작업 예입니다 유형의 텍스트 필드의 배열을 Declate

editAuthors: any[] = []; 

2 단계 : 작성자 배열을 변환하십시오.

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

양식 elemets 작성에 필요한 새로운 editAuthors-Array를 채우십시오.

3 단계 : 추가 버튼에 대한 기능 여기

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

새로운 텍스트 필드 FOT 기본 값을 설정할 수 있습니다.

4 단계 : 제출 양식

이 단계에서는 당신은 editAuthors - 배열의 값을 얻을하고 bookModel.authors-배열이 밀어해야합니다.

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

5 단계 : 템플릿 editAuthors 통해

<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> 

으로 반복. inputs을 name -attribute와 [(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); 
    } 

}