如何使用angular8中的反应形式一次编辑或添加一行 [英] How to edit or add one row at a time using reactive forms in angular8
本文介绍了如何使用angular8中的反应形式一次编辑或添加一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个数据列表，当我单击行时，所有行都是可编辑的，当我单击展开行的编辑按钮时，所有行都将具有与第一行相同的值，但这不应该发生.在表格中可以编辑一行，当单击展开行中的编辑按钮时，也不应该添加新的.但是我在某个地方出错了，谁能帮帮我.
演示:
I have a list of data, when i click on rows, all the rows are editable and when i click on edit button of the expanded row, all the rows will have the same value as in the first row, but that shouldnt happen.One row can be editable at a table, when clicked on edit button in the expanded row, add new should also not be done. But i am going wrong somewhere, can anyone help me.
DEMO:
TS:
eoEdit(eo) {
console.log(eo)
this.eoDetailsList = eo
this.hideEoView = false;
this.initEoForm()
}
HTML:
<table class="table table-hover accordion-table">
<thead>
<tr>
<th></th>
<th scope="col" *ngFor="let field of eoListDetails" (click)="sortEoList(field.param)">
{{field.displayName}}
<i class="{{field.icon}}" aria-hidden="true"></i>
</th>
<th scope="col" class="width75"></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let eo of eoList">
<tr>
<td (click)="editEo(eo)"><a class="accordion-toggle" data-toggle="collapse" href="#row_{{eo.eoid}}"><i
class="fas fa-plus-circle"></i></a></td>
<td *ngFor="let field of eoListDetails" class="{{field.class}}">
{{eo[field.param]}}
</td>
<td><button class="btn btn-outline-primary btn-table" title="Request Update"><i
class="far fa-paper-plane"></i></button>
<button type="button" class="btn btn-outline-primary btn-table" title="View Dec Page"><i
class="fas fa-eye"></i></button></td>
</tr>
<tr>
<td colspan="6" class="hidden-row">
<div class="accordion-wrapper pt-3 px-3 collapse" id="row_{{eo.eoid}}">
<div class="row" *ngIf="hideEoView">
<div class="col">
<div class="form-group">
<label for="">Legal Liability Limit - Each Loss <span
class="text-danger">*</span></label>
<p class="form-control-plaintext font-weight-bold">{{eo.legalLiabilityLoss}}</p>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Legal Liability Limit - Aggregate <span
class="text-danger">*</span></label>
<p class="form-control-plaintext font-weight-bold">{{eo.legalLiabilityAggregate}}</p>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Deductible - Each Loss <span class="text-danger">*</span></label>
<p class="form-control-plaintext font-weight-bold">{{eo.deductibleLoss}}</p>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Deductible - Aggregate <span class="text-danger">*</span></label>
<p class="form-control-plaintext font-weight-bold">{{eo.deductibleAggregate}}</p>
</div>
</div>
</div>
<div class="row" *ngIf="hideEoView">
<div class="col-6">
<div class="form-group">
<label for="">Update Requested</label>
<p class="form-control-plaintext font-weight-bold">{{eo.effectivedate}}</p>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="">Update Received</label>
<p class="form-control-plaintext font-weight-bold">{{eo.updateReceived}}{{eo.updateReceivedHours}}</p>
</div>
</div>
</div>
<div *ngIf="!hideEoView">
<form *ngIf="eoInfoForm && eoDetailsList" [formGroup]="eoInfoForm">
<div class="row">
<div class="col">
<div class="form-group">
<label for="">E&O Carrier <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="E&O Carrier" formControlName="eoCarrier">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Policy Number <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="Policy Number" formControlName="policyNumber">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Effective Date <span class="text-danger">*</span></label>
<input type="text" class="form-control onlyDate" placeholder="MM/DD/YYYY"
formControlName="effectiveDate">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Expiration Date <span class="text-danger">*</span></label>
<input type="text" class="form-control onlyDate" placeholder="MM/DD/YYYY"
formControlName="expirationDate">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="">Legal Liability Limit - Each Loss <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="Legal Liability Limit - Each Loss"
formControlName="legalLiabilityLimitEachLoss">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Legal Liability Limit - Aggregate <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="Legal Liability Limit - Aggregate"
formControlName="legalLiabilityLimitAggregate">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Deductible - Each Loss <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="Deductible - Each Loss"
formControlName="deductibleEachLoss">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Deductible - Aggregate <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="Deductible - Aggregate"
formControlName="deductibleAggregate">
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="">Update Requested</label>
<p class="form-control-plaintext font-weight-bold">12/19/19 4:19 PM jcargile</p>
</div>
</div>
<div class="col-6">
<div class="form-group" formGroupName="updateReceived">
<label for="">Update Received</label>
<div class="input-group">
<input type="text" class="form-control onlyDate" placeholder="MM/DD/YYYY"
formControlName="date">
<input type="text" class="form-control onlyTime" placeholder="hh:mm AM/PM"
formControlName="time">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col d-flex justify-content-end align-items-end">
<div class="form-group">
<button class="btn btn-primary min-w100" (click)="eoDetailsList ? saveDetails() : eoEdit(eo)">{{eoDetailsList ? 'Save' : 'Edit'}}</button>
</div>
</div>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
解决方案
See working demo
You need to add a flag for each row, and set it to true when the row is editable, currently you are using a common variable eoDetailsList to decide row is editable or not, and that affects all rows.
I have added these two flags. Yes you need to add manually
这篇关于如何使用angular8中的反应形式一次编辑或添加一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
