In this article, I will create a look like table and add to dynamic new row and delete row in Angular 5 like below image.before that do that this example just sure In you system angular configure or not because in this article i am not configuring.
Open visual studio code and after that open app.component.html file and write below code
Open visual studio code and after that open app.component.html file and write below code
<h1 align="center">
<br>
Welcome to dynemic add row
</h1>
<form novalidate [formGroup]="FormGroup">
<div >
<div class="col-xs-12 form-group" style="padding: 20px;">
<div style="margin-top:0px" formGroupName="itemRows">
<div class="row panel-heading text-bold" style="text-align:left;margin-top:
0px;margin-left:10px;">
0px;margin-left:10px;">
Address Details
</div>
<ng-container *ngIf='FormGroup.controls.itemRows!=null'>
<div *ngFor="let itemrow of FormGroup.controls.itemRows.controls;let
i=index" [formGroupName]="i">
i=index" [formGroupName]="i">
<div class="row">
<div class="col-md-2 form-group">
<input class="form-control" matInput placeholder="Name"
formControlName="Name">
formControlName="Name">
</div>
<div class="col-md-2 form-group">
<input matInput placeholder="Address" class="form-control"
formControlName="Address">
formControlName="Address">
</div>
<div class="col-md-2 form-group">
<input matInput placeholder="Email" class="form-control"
formControlName="Email">
formControlName="Email">
</div>
<div class="col-md-2 form-group">
<input matInput placeholder="MobileNo" class="form-control"
formControlName="MobileNo">
formControlName="MobileNo">
</div>
<div class="col-md-2 form-group">
<button (click)="deleteRow(i)" class="btn btn-danger">
X
</button>
</div>
</div>
</div>
</ng-container>
<div class="form-group" style="text-align:right;padding-right: 20%">
<button type="button" (click)="addNewRow()" [disabled]="FormGroup.invalid"
class="btn btn-primary">
class="btn btn-primary">
Add New Row
</button>
</div>
</div>
</div>
</div>
</form>
Open visual studio code and after that open app.component.ts file and write below code
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormBuilder, FormControl, Validators, FormArray }
from '@angular/forms';
from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
preserveWhitespaces: true,
providers: [MyserviceService]
})
export class AppComponent implements OnInit {
FormGroup: FormGroup;
TotalRow: number;
constructor(private _fb: FormBuilder) { }
ngOnInit(): void {
this.FormGroup = this._fb.group({
itemRows: this._fb.array([this.initItemRow()]),
});
}
initItemRow() {
return this._fb.group({
Name: [''],
Address: [''],
Email: [''],
MobileNo: ['']
});
}
addNewRow() {
const control = <FormArray>this.FormGroup.controls['itemRows'];
control.push(this.initItemRow());
}
deleteRow(index: number) {
const control = <FormArray>this.FormGroup.controls['itemRows'];
if (control != null) {
this.TotalRow = control.value.length;
}
if (this.TotalRow > 1) {
control.removeAt(index);
}
else {
alert('One record is mandotory');
}
}
}
3 comments:
For the given code to add rows dynamically.how to bind input values using ngmodel.
First, you create a model class and declare properties. Then you create a method on the submit button after that declares an array type of model class and then used for each loop with push method. You take help from below code
public id: number;
public name: string;
public year: number;
public rows: Array<{id: number, name: string, year: number}> = [];
buttonClicked() {
this.rows.push( {id: this.id, name: this.name, year: this.year } );
//if you want to clear input
this.id = null;
this.name = null;
this.year = null;
}
Post a Comment