Добавить 3 текстовых области и возможность добавить больше Angular 6 - PullRequest
Новая
       9

Добавить 3 текстовых области и возможность добавить больше Angular 6

0 голосов
/ 16 сентября 2018

Я должен добавить 3 текстовые области и кнопку, которые позволяют добавить следующую текстовую область и иметь возможность сохранить текст, введенный в текстовой области Я пытаюсь сделать это так: 

  <form>
    <div class="form-group">
      <div class="row">
          <div class="col-md-4" *ngFor="let t of textarea; let in=index">
              <textarea class="form-control" id="" rows="5" [(ngModel)]="textarea[in]"   name="something" class="form-control"  placeholder="Type here to add..."></textarea>
          </div>
         <button (click)="add()">Add input</button>
      </div>
    </div>
  </form>

ц 

export class TextareaComponent {

  textarea: any[]

  constructor() {
    this.textarea = ['', '', ''];
  }

  add() {
    this.textarea.push('');
  }
}

Но это странный эффект, когда я пытаюсь добавить что-то в первую текстовую область ... https://stackblitz.com/edit/angular-bjungk?file=src%2Fapp%2Fapp.component.html

Я хочу иметь возможность вводить что-то для каждой текстовой области, теперь, когда я пытаюсь ввести что-то для первой текстовой области, то же самое отображается во второй и третьей текстовой области.

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Ну, нет ничего плохого в вашем коде.Просто внесите некоторые изменения в ваш код.

html 

<form>
    <div class="form-group">
        <div class="row">
            <div class="col-md-4" *ngFor="let t of textarea; let in=index; trackBy: trackByFn">
                <textarea class="form-control" id="" rows="5" [(ngModel)]="textarea[in]" [ngModelOptions]="{standalone: true}" placeholder="Type.."></textarea>
            </div>
            <button (click)="add()">Add input</button>
        </div>
    </div>
</form>

ts 

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

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

  constructor() {
  }

  trackByFn(index, item) {
    return index; // or item.id
  }

  add() {
    this.textarea.splice(this.textarea.length, 0, '');
  }

  ngOnInit() {
    this.textarea = ['', '', ''];
  }
}

Использование только что пропустилtrackBy угловая функция.

Вот Stackblitz

0 голосов
/ 16 сентября 2018

Попробуйте обернуть ваши строковые значения в объект: 

textarea: {value: string}[];

constructor() {
  this.textarea = [{value: ''}, {value: ''}, {value: ''}];
}

add() {
  this.textarea.push({value: ''});
}

<textarea class="form-control"
          rows="5" [(ngModel)]="textarea[in].value" 
          [name]="'something' + in" 
          placeholder="Type..."></textarea>

Рабочий пример: https://stackblitz.com/edit/angular-vz8g7d

...