启用/禁用 ngFor 中的特定按钮



我想在特定行中启用保存按钮,并通过编辑按钮在上面的循环中禁用两个按钮(添加选择器和添加部分(。但是我无法仅禁用/启用生成的特定按钮。 我还想在我的组件中管理它以启用/禁用。 我希望任何人都可以帮助我。

我的表单看起来像这样 -> https://gyazo.com/329e442becd93222d33c15b1232cc9d2

<div formArrayName="sectionList">
<div *ngFor="let section of myForm.get('sectionList').controls; let i=index" [formGroupName]="i">
<div formGroupName="section">
<button mat-button color="primary" (click)="enableSection(i)">Edit</button>    
<mat-form-field>
<input matInput placeholder="name" formControlName="name">
<mat-error *ngIf=""> 
todo
</mat-error>
</mat-form-field>   
<button mat-raised-button color="warn" (click)="deleteSection(i)" >Delete</button>    
<button mat-raised-button color="primary" [disabled]="true" (click)="saveSection(i)">Save</button> 
</div>
<div formArrayName="selectorList">
<div *ngFor="let selector of section.controls.selectorList.controls; let j=index" [formGroupName]="j">
<button mat-button color="primary" (click)="enableSelector(i, j)">Edit</button>    
<mat-form-field>
<input matInput placeholder="locator" formControlName="locator" >
</mat-form-field>
<mat-form-field>
<input matInput placeholder="language" formControlName="language" >
</mat-form-field>            
<mat-form-field>
<input matInput placeholder="value" formControlName="value" >
</mat-form-field> 
<button mat-raised-button color="warn" (click)="deleteSelector(i,j)">Delete</button> 
<button mat-raised-button color="primary" [disabled]="isDisabled" (click)="saveSelector(i,j)">Save</button>   
</div>
<button mat-raised-button color="primary" (click)="addSelector(i)">Add Selector</button>    
</div>    
</div> 
<button mat-raised-button color="primary" (click)="addSection()">Add Section</button>     
</div>
enableSection(i){
this.sectionForms.controls[i].get('section').enable();
}
enableSelector(i, j){
this.isDisabled = false;
this.myForm.get('sectionList.' + i + '.selectorList.' + j).enable();
}

只需添加到要禁用的按钮[disabled]="rowIWannaDisable === i"其中i*ngFor的索引,如ngFor="let section of myForm.get('sectionList').controls; let i=index"rowIWannaDisable是您希望禁用按钮的行号。您还可以使用函数而不是rowIWannaDisable来动态选择禁用的行。

最新更新