Angular 7 Reactive Form - problem with rendering and delete the element

Question

Hi i have a problem with a simple angular component, i'm using a reactive form to insert text then i loop by ngFor the results

TEMPLATE

<form [formGroup]="colorsForm">
  <div>
    <label for="colorName">Color Name</label>
      <input id="colorName" type="text" class="form-control" 
        formControlName="colorName" name="colorName"/>
  </div>
  <button  type="button"  (click)="addCorlo()">ADD</button>
</form>
<ul>
<li *ngFor="let color of colorsList">{{ color.colorName }} <button (click)="delete()">DELETE</button></li>
</ul>

TS

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Reactive Form';
  colorsForm: FormGroup; // New Reactive Form
  colorsList: any[] = [];


  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {

    this.colorsForm = this.fb.group({
      colorName: [null]
    });

  }

  addCorlo() {
    if (this.colorsForm.valid) {
      let color = { 
        colorName: this.colorsForm.value.colorName,
      };
      this.colorsList.push(color);
    }
    this.colorsForm.reset();
   }

   delete(){
     console.log('delete')
   }
}

I tried to delete the element but I have not succeeded.....

this is a stackblitz example ExampleLink

what is the use of FormGroup here?

Prashant Pimpale
– Prashant Pimpale

2020-05-09 06:08:36 +00:00
Commented May 9, 2020 at 6:08 — Prashant Pimpale
– Prashant Pimpale, Commented May 9, 2020 at 6:08

Parween Kelappan · Accepted Answer · 2020-05-09 06:05:38Z

1

In app.component.html, you can add let i = index to ngFor. This is to assign an index to each of the elements. Then you can pass i to the delete function (click)="delete(i)".

    <li *ngFor="let color of colorsList; let i = index;">{{ color.colorName }} <button (click)="delete(i)">DELETE</button></li>

In app.component.ts, you can use the splice method to remove an element from an array. In this case, the splice method accepts 2 parameters. The first parameter is the position of the item you intend to remove and the second parameter is the number of items to be removed.

    delete(i){
       this.colorsList.splice(i, 1);
    }

Here's the link to the edited code in Stackblitz: https://stackblitz.com/edit/example-reactive-form-f1auz8

answered May 9, 2020 at 6:05

Parween Kelappan

263 bronze badges

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

Comments

iamaword · Accepted Answer · 2020-05-09 05:13:44Z

1

you'll want to count the index in the ngFor:

 <li *ngFor="let color of colorList; let i = index">....

Pass the index i down to the method, and delete from the array based on that index.

Here's a decent ref: https://www.angularjswiki.com/angular/how-to-get-index-of-element-in-ngfor-angular/

Hope that helps,

Happy coding!

answered May 9, 2020 at 5:13

iamaword

1,5371 gold badge12 silver badges21 bronze badges

1 Comment

michelemalagnini Over a year ago

great thanx i solved the problem i used let i = index and. delete(i: number) { var index = this.colorsList.indexOf(i); if (i > -1) { this.colorsList.splice(i, 1); console.log('ID',i) console.log('ARRAY',this.colorsList) } return this.colorsList; }

Collectives™ on Stack Overflow

Angular 7 Reactive Form - problem with rendering and delete the element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related