Angular 4 array of strings

Question

I'm using reactive form, I have 2 questions : I want to use a array of strings as an input that the user can change directly, I have a data model like this

export class Work {
    toDos: string[];  
}

Q1 : Is it ok to bind a input directly to an array of primitives or should I convert toDos in an array of object with a property name, and always use controls?

Q2 : I tried several think, but I can't find a simple way to make it working :

<div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
   <input [(ngModel)]="toDos[index]" placeholder="item" name="word{{index}}">
</div>

 <button (click)="addItem()" type="button">Add an 
Item</button>
<div *ngFor="let item of toDos">
  <label>{{item}}</label>
</div>

In the component.ts

toDos: string[] =["Todo1","Todo2","Todo3"];
trackByIndex(index: number, obj: any): any {
   return index;
 }
 addItem() {
   this.toDos.push('0');
 }

The add function works ok but the input is not bind and I don't get any errors, I can change the value of the input but it's not reflect on {{item}}

It works for me plnkr.co/edit/pOzYm4TNJqCbsnyC2jkk?p=preview — yurzui
– yurzui, Commented Jun 27, 2017 at 20:02
I found why it was not working, it was not working because it was inside a <form></form> I don't really know why though. It's ok now, thanks, I'd still be interesting to know if it's best practice to always use array of objects instead of array of primitives, and if it's better to use controlers with formControlName inside input instead of ngModel — q.b
– q.b, Commented Jun 27, 2017 at 21:41

Omkar Dixit · Accepted Answer · 2018-01-02 08:41:43Z

3

Create a simple array as follows:

yourArray= new Array();

You can add elements to it easily using push function of the Array as follows:

yourArray.push(data);

answered Jan 2, 2018 at 8:41

Omkar Dixit

7741 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 array of strings

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related