Add 3 textarea and possibility to add more Angular 6

1
votes

I must add 3 textarea and button which allow add next textarea and be able to save the text entered in the textarea I try do it like this: 

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

ts

export class TextareaComponent {

  textarea: any[]

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

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

But it's strange effect when I try add something to first textarea... https://stackblitz.com/edit/angular-bjungk?file=src%2Fapp%2Fapp.component.html

I want to be able to type something to each textarea, now when I try type something to first textarea, the same is display in second and third textarea.

2
angularformsngfor
What is your problem? Tried your code in stackblitz and seams to be working: stackblitz.com/edit/angular-nfkbun - Martin Adámek
I want to be able to type something to each textarea, now when I try type something to first textarea, the same is display in second and third textarea - emka26
Have you tried reactive form? - Shashikant Devani
No, but it's imposible to do it in this way? - emka26
Off-course it is. See my below answer. But reactive form give more advantages in angular. - Shashikant Devani

2 Answers

4
votes

Try to wrap your string values in object:

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>

Working example: https://stackblitz.com/edit/angular-vz8g7d

0
votes

Well nothing is wrong in your code. Just do some change in your code.

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 = ['', '', ''];
  }
}

Use have just missed trackBy angular function.

Here is the Stackblitz