Form into ngFor

Ionic Framework ionic-v3
1

Hi all :slight_smile: ,
I’m facing two problems here, with the following code.
First, the form is the same for all entries. When i put some text in the input it appears into all of the forms. Am I doing somthing wrong with forms and ngFor?

Second, when i use type=“number” on my second input i got :slight_smile:
" The specified value “sfse” is not a valid number. The value must match to the following expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?" in console.
What should i do with this?

Thank you all!!

  <ul>
      <li *ngFor="let category of menu">
        <input type="checkbox" checked>
        <i></i>
        <h2 class="name">
          <span>{{category.name}}</span>
        </h2>
        <div class="item-content">
          More products
          <form attr.id="{{category._id}}" (ngSubmit)="createProduct(category._id)">
            <ion-input type="text" name="name" [(ngModel)]="newProduct.name" placeholder="Nom Produit" required></ion-input>
            <ion-input type="number" name="name" [(ngModel)]="newProduct.price" placeholder="Prix" required></ion-input>
            <button ion-button type="submit">Créer Produit</button>
          </form>
          <button (click)="deleteCategory(category._id);">Delete</button>
        </div>
      </li>
    </ul>
2

@poptocrack The form object is the same for all entries: newProduct, in your component class, is shared by all forms. You could create a newProducts array or, even better, create a custom component representing one category menu:

In you existing component HTML:

<ul>
	<li *ngFor="let category of menu">
		<my-component [myCategory]="category"></my-component>
	</li>
</ul>

The new custom component:

@Component({
	selector: 'my-component',
	templateUrl: 'my-component.html',
})
export class MyComponent {
    @Input('myCategory') category: MyCategoryClass;

	public newProduct: MyProductClass = {};

	public createProduct() {
		let categoryId = this.category._id;
		console.log('categoryId', categoryId);
		//TODO: create product...		
	}

	public deleteCategory() {
		let categoryId = this.category._id;
		console.log('categoryId', categoryId);
		//TODO: delete category...		
	}
}

The new custom component HTML:

<input type="checkbox" checked>
<i></i>
<h2 class="name">
	<span>{{category.name}}</span>
</h2>
<div class="item-content">
	More products
	<form attr.id="{{category._id}}" (ngSubmit)="createProduct()">
	<ion-input type="text" name="name" [(ngModel)]="newProduct.name" placeholder="Nom Produit" required></ion-input>
	<ion-input type="number" name="name" [(ngModel)]="newProduct.price" placeholder="Prix" required></ion-input>
	<button ion-button type="submit">Créer Produit</button>
	</form>
	<button (click)="deleteCategory();">Delete</button>
</div>

About your second question, is your price a number or string with non-digit caracters? If is is a string like US$ 50.00 or something like this, I think this is the reason. It must be a number (like 50.00).

3

Thank you for the reply, i will probably use your solution :slight_smile:
For my second problem, the error comes when i type somthing in the first input, but only if the second one is active. (I forgot to say it)

4

@poptocrack You mean that in your second problem you write something like sfse in the first input (the name) and it shows the error if the second input has type number? That is very weird if I understood correctly :confused:

Is there something listening to changes in you component class or some asynchronous event trying to change newProduct.price? Is there some initial value in newProduct.price?

You can place {{ newProduct | json }} in your HTML to help finding the cause. You can also let only the second input and write in it to try to see if there is any error.

5

Yes, that’s wreid and that’s what happend here
The main problem was that i used only one variable for all my forms. I fixed it with your tips, thank you.
My 2 issues came from this mistake.
Thank you again :slight_smile:

6

@poptocrack Ok, no problem :slight_smile:

7

I also have the same problem while i am using ngfor under i have one ion-input when i enter amount in ion-input that time it will take same for all other field

<ion-card id=“maincard” padding *ngFor=“let item of bating;let i=index” [(ngModel)]=“selectedvalue” [hidden]=“maincard”>

  <ion-col>  
    <ion-input style="width: 75px;" type="number"  attr.id="add{{i}}" placeholder="1234{{i}}" [(ngModel)]="bidAmount" class="amount"  ng-model="amount" required></ion-input>
    
  </ion-col>
    <button ion-button small outline  (click)="btn_betting_wetten(item.bet_id,item.topic_id,'top')" type="submit" disabled={{btnWetten}} ng-disabled="amount.$invalid"> Wetten {{i}}</button>


</ion-row>