Я использую метод toggleDropdown для сброса формы после успеха, но мой руководитель группы прокомментировал, что не следует выполнять такие манипуляции с DOM. Пожалуйста помогите

[введите описание изображения здесь][1]

Я использую метод toggleDropdown для сброса формы после успеха, но мой руководитель группы прокомментировал, что не следует выполнять такие манипуляции с DOM. Пожалуйста помогите

        <button class="btn btn-secondary dropdown-toggle"
      [ngClass]="{'btn-sm  bg-rounded': !showBtnText, 'btn-bg-red' : dropDownState, 'btn-bg-blue' : (searchedText && !dropDownState), 'btn-bg-default' : (!dropDownState && !searchedText)}" type="button" id="dropdown-save-history" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false" [disabled]="!searchedText"
      (click)="searchedText ? toggleSave() : ''">
      <i *ngIf="!showBtnText" [ngClass]="dropDownState? 'fa fa-times' : 'fa fa-save'" aria-expanded="false"></i>        
  </button>

  <div class="dropdown-menu p-2" (click)="$event.stopPropagation()"> 
      <div *ngIf="ctx?.formGroup">
          <ng-container *ngTemplateOutlet="addeditCtx; context:{ $implicit: ctx}"></ng-container>
      </div>
  </div>
</div>
<ng-template #addeditCtx let-ctx>
  <add-edit [metadata]="ctx.metadata" [data]="ctx.data" [subAttribute]="ctx.subAttribute" [formGroup]="ctx.formGroup"
      [helper]="ctx.helper"></add-edit>
  <ng-content></ng-content>
  <footer class="text-center">
      <button type="button" class="btn btn-primary" [disabled]="ctx.formGroup?.invalid" [hidden]="ctx.okBtnTitle"
          (click)="onClose()"></button>
  </footer>
</ng-template>

 toggleDropdown(searchCompRef?: SearchHistoryComponent) {
        if (searchCompRef) { // while editing from list dropdown
            if (searchCompRef.dropdownRef.nativeElement.classList.contains('open')) {
                searchCompRef.ctx.data = {};
                searchCompRef.dropdownRef.nativeElement.classList.remove('open');
            } else {
                searchCompRef.dropdownRef.nativeElement.classList.add('open');
            }
        } else {
            if (this.dropdownRef.nativeElement.classList.contains('open')) {
                this.ctx.data = {};
                this.dropdownRef.nativeElement.classList.remove('open');
            } else {
                this.dropdownRef.nativeElement.classList.add('open');
            }
        }
    }```


  [1]: https://i.stack.imgur.com/4wdEQ.png

0 ответов

Другие вопросы по тегам