在表格中添加动态行，但该行中的数据为空

Question

What am I doing wrong here. Need help.

When I click on "Add" button, the data I selected in the rows of table are becoming blank. But When I select Delete button and then click on Add button, then it not emptying of one time only. If I see console, I can see data there, but it is not showing up on the screen. Here is my code:

html:

<div class="container">
            <div class="row" style="margin-bottom: 10px;">
                <div class="col">
                    <div class="row111">
                        <label for="Select Image" class="col-sm-311 col-form-label111">Add Threshold and Notification for this Inspection: </label>
                        <div class="col-sm-9">

                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="float-right">
                        <button class="btn btn-default" type="button" (click)="addNotification()">Add</button>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Threshold</th>
                        <th>Notification Level</th>
                        <th>Message</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr> -->
                     <tr *ngFor="let notification of notificationArray; let i = index">
                        <td>{{i+1}}</td>
                        <td>
                            <select class="form-control" maxlength="50" readonly
                                       required
                                       id="threshold"
                                       name="notification.thresholdId"
                                       [(ngModel)]="notification.thresholdId"  
                                        #threshold="ngModel" >
                                        <option value="0" selected> Select </option>
                                        <option *ngFor="let threshold of thresholdList" value="{{threshold.thresholdId}}" >
                                              {{threshold.threshold}}
                                        </option>
                            </select>
                        </td>
                        <td>
                            <input [(ngModel)]="notification.notificationLevel" required class="form-control" type="text" name="notification.notificationLevel" />
                        </td>
                        <td>
                            <input [(ngModel)]="notification.message" required class="form-control" type="text" name="notification.message" />
                        </td>
                        <td>
                            <button class="btn btn-default"  type="button" (click)="deleteNotification(i)">Delete</button>

                        </td>
                    </tr>

                </tbody>
            </table>

    </div>

component.ts:

notificationArray: Array<NotificationLevel> = [];
newNotification: any = {};
ngOnInit(): void {
    this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
    this.notificationArray.push(this.newNotification);
}
addNotification(index) {

    this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
    this.notificationArray.push(this.newNotification);
    console.log(this.notificationArray);  // I can see all entered data in console
    return true;
}

deleteNotification(index) {
    if(this.notificationArray.length ==1) {
        alert("At least one Notification Required for an Inspection");
        return false;
    } else {
        this.notificationArray.splice(index, 1);
        return true;
    }
}

Answer 1

Ok, solve the problem:-

The main problem is in name="" attribute. name="" must differ in each row .We can solve it in two ways:

1) Either Change the name="" attributes name dynamically so that for every row it has a different name, i did it to add index number with it as

<input [(ngModel)]="notification.notificationLevel" name="notificationThreshold{{i}}" required class="form-control" type="text" />

2) Or avoid name="" and so We can avoid [(ngModel)] By [value] and (input) and can use as like :-

 <input [value]="notification.notificationLevel" (input)="notification.notificationLevel=$event.target.value" required class="form-control" type="text"/>

Answer 2

In fact, all of your notificationArray elements is the same instance of newNotification . By doing this : this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""}; you actually reset the first line too because of it.

Try to store newNotification in a var instead :

notificationArray: Array<NotificationLevel> = [];
newNotification: any = {};
ngOnInit(): void {
    var newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
    this.notificationArray.push(newNotification);
}
addNotification(index) {
    console.log(this.notificationArray);
    // here is the correction
    var newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
    this.notificationArray.push(newNotification);
    console.log(this.notificationArray);
    return true;
}

deleteNotification(index) {
    if(this.notificationArray.length ==1) {
        alert("At least one Notification Required for an Inspection");
        return false;
    } else {
        this.notificationArray.splice(index, 1);
        return true;
    }
}

update :

I don't know if it's related but you'll have duplicate threshold id on your select. Use your i to make it unique. It's the same for your input names. You should add [] after the field name otherwise only the last row will be submit.

I added a console.log of you array after the push. Can you tell in comment if the first index is reset at this point ?

Answer 3

Of course the row is cleared because you are clearing it:

this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};

So on clicking the add button, the bound values are overridden and then you are pushing it into the array. Thus they are cleared :)