Angular 如何在删除阵列中上传的文件后禁用保存按钮？

Html：在这个代理数组中，我上载了一个文件，然后我将删除保存btn，应根据表单验证禁用，但在这种情况下，当我在第一次添加文件时，保存btn已启用，然后删除文件保存btn未禁用。。。你能帮我做这个吗

    <mat-accordion>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Agents*
                        <!-- <input matInput formControlName="agents" placeholder="Agents" readonly> -->
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div formArrayName="AgentArray" *ngFor="let item of agentArray.controls; let i = index;">
                    <div [formGroupName]="i" class="boxClass">
                        <div type='button' class='close closeBtn' (click)="removeAgentDiv(item, i)">×</div>
                        <mat-form-field>
                            <!-- <input matInput formControlName="agent_id" placeholder="Agent Name"> -->
                            <mat-label>Select Agent</mat-label>
                            <mat-select formControlName="agent_id" required>
                                <mat-option *ngFor="let agent of listOfAgents" [value]="agent.id">
                                    {{agent.contact_person}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                      <mat-label>Ingredient Specification sheet*</mat-label>
                        <mat-list role="list">
                            <mat-list-item role="listitem" *ngFor="let item of agentUploader[i].queue">
                                <div class="file-name">
                                    <span>{{item?.file?.name}}</span>
                                    <div class="btn-custom buttonCursor" *ngIf="!item?.file?.name === 
                                           showRemoveBtn" 
                                         (click)="removeAgentUploadFile(i,item)">Remove</div>
                                </div>
                            </mat-list-item>
                        </mat-list>
                        <input type="file" ng2FileSelect id="{{'getAgentfile'+i}}" formControlName="iss" [uploader]="agentUploader[i]"
                        accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff, .xls, .xl, .pdf, .xlsx, .xls, .doc, .docx, .txt, .img|image/*"
                        style="display: none"  required="required"/>

                        <i class="material-icons" (click)="selectAgentFile(i)">add_circle_outline</i>

                        <mat-form-field>
                            <input matInput type="date" class="unstyled"  min="2019-10-01"
                                max="2020-03-31" placeholder="Ingredient Specification Sheet Expiry Date"
                                formControlName="iss_expiry_date" required>
                        </mat-form-field>
                    </div>
                </div>
                <div class="btn btn-primary" style="margin-top: 10px;" (click)="addAgentItem()">Add</div>
            </mat-expansion-panel>
        </mat-accordion>

 removeAgentUploadFile(index,item) {
   var file = this.agentUploader[index].queue.indexOf(item)
    this.agentUploader[index].queue.splice(file,1)
   // this.agentUploader[index].queue = this.agentUploader[index].queue.filter(file => file._file.name !== data)
    this.MaterialForm.patchValue({
      iss : this.MaterialForm.get('AgentArray').value.map((data, i) => {
        if (i == index){
           data.iss = null
          }
      })
    })
    console.log( this.MaterialForm.get('AgentArray').value)
  }
 createAgentItem(): FormGroup {
    return this._formBuilder.group({
      iss: new FormControl(null, Validators.required),
      iss_expiry_date: new FormControl(null, Validators.required),
      agent_id: new FormControl(null, Validators.required)
    });
  }
 addAgentItem() {
    this.agentArray.push(this.createAgentItem());
    this.agentUploader[this.agentArray.length - 1] = new FileUploader({
      isHTML5: true,
    });
    this.agentUploader[this.agentArray.length - 1].onAfterAddingFile = (fileItem: FileItem) => this.onAfterAddingFile(this.agentUploader[this.agentArray.length - 1], fileItem)

  }

---

您可以使用按钮上的disabled属性动态禁用它

<button [disabled]="condition">Click</button>

---

如果您没有按钮元素，而是有一个充当按钮的div，那么您可以更改div的样式，使其看起来像一个禁用的按钮。

模板中的方法会导致性能问题，因为角度查找更改检测。这里解释了@SameerKhan你在暗示什么？我不是建议在模板本身上编写一个庞大的方法。我只是说使用简单的属性绑定，不应该有性能问题。这是表单验证，我认为这是行不通的。。我们无法使用此自定义属性。属性绑定或动态样式/类是实现所需功能的主要方法。如果您不确定如何实施此操作，请创建一个stackblitz复制您的问题。在我的表单中，表单验证缺失或我可能会出错，但找不到。。

export class someComponent {
 condition = false;


 // Inside the function that does something after which you want to disable the button
 someFunction() {

  this.condition = true;
 }
}