typescript - Lägg till textruta och text/chip dynamiskt i Angular 5

Jag vill lägga till en textruta (max 10) dynamiskt med en stängningsknapp (X) och sedan vill jag lägga till lite text i den. Texten ska visas i en annan vy efter att man klickar på knappen Spara. Tillagd textruta eller text ska kunna tas bort om man klickar på stängningsknappen (X).

Vyn kan växlas med en redigera/stäng-knapp.

Svar #1

app.component.ts

  fieldArray: Array<any> = [];
  newAttribute: any = {};

  firstField = true;
  firstFieldName = 'First Item name';
  isEditItems: boolean;

  addFieldValue(index) {
    if (this.fieldArray.length <= 2) {
      this.fieldArray.push(this.newAttribute);
      this.newAttribute = {};
    } else {

    }
  }

  deleteFieldValue(index) {
    this.fieldArray.splice(index, 1);
  }

  onEditCloseItems() {
    this.isEditItems = !this.isEditItems;
  }

app.component.html

    <div class="container">
    <br>
    <div class="row">
        <table class="table table-striped table-bordered col-lg-4">
      <caption><i>Add/remove textbox and chip dynamically in Angular 6</i></caption>
            <thead>
                <tr>
                    <th>Item Name
                        <a (click)="onEditCloseItems()" class="text-info float-right">
                            <i class="mdi mdi-{{isEditItems ? 'close' : 'pencil'}} mdi-18px"></i>
                        </a>
                    </th>
                </tr>
            </thead>

            <tbody *ngIf="!isEditItems">
                <tr *ngIf="firstField">
                    <td>
                        <i (click)="firstField = false" class="mdi mdi-close mdi-18px"></i> {{firstFieldName}}
                    </td>
                </tr>
                <tr *ngFor="let field of fieldArray; let i = index">
                    <td *ngIf="field?.name">
                        <i (click)="deleteFieldValue(i)" class="mdi mdi-close mdi-18px"></i> {{field.name}}</td>
                </tr>
            </tbody>

            <tbody *ngIf="isEditItems">
                <tr>
                    <td *ngIf="firstField">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div (click)="firstField = false" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
                            </div>
                            <input [(ngModel)]="firstFieldName" class="form-control py-2 " type="text" name="firstFieldName" placeholder="Item Name">
                        </div>
                    </td>
                </tr>

                <tr *ngFor="let field of fieldArray; let i = index">
                    <td>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div (click)="deleteFieldValue(i)" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
                            </div>
                            <input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" placeholder="Item Name">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <button *ngIf="fieldArray.length <= 2" class="btn btn-success btn-sm" type="button" (click)="addFieldValue()" style="margin-right:10px">Add More Item</button>
                        <button (click)="onEditCloseItems()" class="btn btn-primary btn-sm" type="button">Save Items</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Stackblitz-demolänk 1

Redigerad Stackblitz-demolänk 2