添加 3 个文本区域和添加更多文本区域的可能性 Angular 6

Question

我必须添加 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>

ts

export class TextareaComponent {

  textarea: any[]

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

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

但是当我尝试向第一个 textarea 添加内容时出现奇怪的效果... https://stackblitz.com/edit/angular-bjungk?file=src%2Fapp%2Fapp.component.html

我希望能够在每个文本区域中键入内容，现在当我尝试在第一个文本区域中键入内容时，第二个和第三个文本区域中也会显示相同的内容。

Answer 1

尝试将您的字符串值包装在对象中：

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

Answer 2

好吧，您的代码没有任何问题。只需更改您的代码即可。

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

使用刚刚错过的trackByangular功能。

这是Stackblitz

添加 3 个文本区域和添加更多文本区域的可能性 Angular 6

Add 3 textarea and possibility to add more Angular 6

forms

ngfor

angular