问题描述
我正在使用 angular8 反应形式,在此我需要进行内联编辑和添加。应该一次添加和编辑一个。现在,我可以一次添加多个记录和多个添加新记录。最初仅对现有记录的编辑按钮显示,当单击编辑时,它必须替换为保存按钮,对于添加新模式,不应显示编辑按钮。我已经尝试了这么多步骤,我还添加了我的工作副本的演示。
HTML:
<tbody formArrayName="opportunitesx">
<tr *ngFor="let item of opportunitiesForm.get('opportunitesx')['controls']; let i = index;"
[formGroupName]="i">
<td> </td>
<td>
{{opportunitiesForm.get('opportunitesx')['controls']['competitorId']}}
<select class="custom-select drop" formControlName="competitorId">
<option selected="" disabled="">Choose Competitor</option>
<option value="1">Lloyd's - TPI - Owners - Alabama</option>
<option value="2">Argenia - Dwelling - Owners - Alabama</option>
<option value="3">Lloyd's - Foremost - Dwelling - Alabama</option>
</select>
</td>
<td>
<input type="text" class="form-control" placeholder="Quote Count"
formControlName="quoteCount" allowNumberOnly maxlength="4">
</td>
<td>
<input type="text" class="form-control" placeholder="Policy Count"
formControlName="policyCount" allowNumberOnly maxlength="4">
</td>
<td>
<input type="text" class="form-control" placeholder="Written Premium"
formControlName="writtenPremium" >
</td>
<td>
<input type="checkBox" style="width: auto;"
formControlName="isTrack">
</td>
<td class="width125">
<button
class="btn btn-outline-primary btn-table" title="Edit" (click)="editOpportunityDetails(i)" [disabled]="valuationModel.isEditValue && valuationModel.isEditValue != i"
>Edit</button>
<button class="btn btn-outline-primary btn-table ml-1" title="Save"
type="button" [disabled]="valuationModel.isEditValue && valuationModel.isEditValue != i" (click)="saveOpportunityDetails(i)">Save</button>
<button class="btn btn-outline-primary btn-table ml-1" title="Delete"
type="button" (click)="deleteOpportunityDetails(i)" [disabled]="valuationModel.isEditValue && valuationModel.isEditValue != i">Delete</button>
</td>
</tr>
</tbody>
TS:
private getopportunitiesList() {
this.valuationModel.opportunityList = this.userListDetails;
this.opportunitesx.controls = [];
for (let lang of this.valuationModel.opportunityList) {
let group = this.createOpportunityinformation();
group.get('competitorId').setValue(lang.competitorId);
group.get('competitorId').disable();
group.get('quoteCount').setValue(lang.quoteCount);
group.get('quoteCount').disable();
group.get('policyCount').setValue(lang.policyCount);
group.get('policyCount').disable();
group.get('writtenPremium').setValue(lang.writtenPremium);
group.get('writtenPremium').disable();
group.get('isTrack').setValue(lang.isTrack);
group.get('isTrack').disable();
group.get('Id').setValue(lang.Id);
group.get('Id').disable();
this.opportunitesx.push(group);
}
this.preventOpportunityEmpty();
}
public addOpportunityDetails() {
this.opportunitesx.push(this.createOpportunityinformation());
}
public deleteOpportunityDetails(i) {
this.opportunitesx.removeAt(i);
}
public editOpportunityDetails(i,event) {
this.valuationModel.isEdit = false;
this.valuationModel.isEditValue = i;
this.opportunitesx.controls[i].enable();
this.opportunitesx.controls[i]['controls']['competitorId'].disable();
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)