我正在使用 Angular8 應用程序,在此我使用 ngModel 添加了內聯編輯,但在此我必須禁用保存按鈕,如果輸入字段沒有變化,如果 3 個字段之間有任何變化,那麼保存按鈕應該是啟用。
HTML:
<ng-container *ngFor="let contact of yearManagement">
<tr>
<td></td>
<td class="text-capitalize">
<ng-container *ngIf="editableRow !== contact.id; else newDeb">
{{contact.policyTypeName}}
</ng-container>
<ng-template #newDeb>
<input [(ngModel)]="contact.policyTypeName" />
</ng-template>
</td>
<td>
<ng-container *ngIf="editableRow !== contact.id; else newDeb1">
{{contact.quotes}}
</ng-container>
<ng-template #newDeb1>
<input [(ngModel)]="contact.quotes" (ngModelChange)="onModelChange(oldVal, $event); oldVal = $event;"/>
</ng-template>
</td>
<td>
<ng-container *ngIf="editableRow !== contact.id; else newDeb2">
{{contact.policyCT}}
</ng-container>
<ng-template #newDeb2>
<input [(ngModel)]="contact.policyCT" />
</ng-template>
</td>
<td>
<ng-container *ngIf="editableRow !== contact.id; else newDeb3">
{{contact.writtenPremium}}
</ng-container>
<ng-template #newDeb3>
<input [(ngModel)]="contact.writtenPremium" />
</ng-template>
</td>
<td class="width125">
<ng-container *ngIf="editableRow == contact.id;">
<button class="btn btn-outline-primary btn-table" title="close"
(click)="onCloseEvent(contact)"
>close</button>
<button class="btn btn-outline-primary btn-table" title="close" (click)="onSave(contact)" [disabled]="disableSubmit()"
>save</button>
</ng-container>
<ng-container *ngIf="editableRow !== contact.id;">
<button class="btn btn-outline-primary btn-table ml-1" title="Edit"
(click)="[editableRow = contact.id,onEditEvent(contact)]">Edit</button>
</ng-container>
<button class="btn btn-outline-primary btn-table ml-1" title="Delete"
(click)="deleteCommitment(contact)">Delete</button>
</td>
</tr>
</ng-container>
TS:
public disableSubmit() {
let disabled = true;
const keys = Object.keys();
keys.forEach(key => {
if () {
disabled = false;
return;
}
});
return disabled;
}
我試圖理解這個問題並做了一些修改,它確實按預期工作。
首先:定義一個名為 disabled 的布爾變量
selectedRow: any;
disable: boolean;
public onEditEvent(event) {
this.disable = true;
this.selectedRow = { ...event };
this.editCommitment = event;
}
第一次點擊edit時為true,並禁用保存按鈕。
第二次更改onChangeModel函數,檢查字段中的值是否改變,如果改變,重新激活保存按鈕,否則將被禁用。
oldValue: string;
onModelChange(oldval, event) {
if (event) {
this.disable = false;
console.log(oldval, event);
if (this.oldValue != event) {
}
this.oldValue = event;
}
}
最後在 getter 函數中返回有價值的禁用
public get disableSubmit() {
return this.disable;
}
現在在保存按鈕上調用這個 getter 函數
<button
class="btn btn-outline-primary btn-table"
title="close"
(click)="onSave(contact)"
[disabled]="disableSubmit"
>
save
</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句