Angular 8: остановка реактивного поля формы при асинхронном вызове c, если предыдущее значение совпадает с текущим значением

Question

У меня есть поле ввода реактивной формы для ввода имени, также у поля есть асинхронный c валидатор, который проверяет, введено ли уже введенное имя в базу данных или нет, и как только форма будет отправлена, она будет go при редактировании. Теперь проблема заключается в том, что когда форма переходит в режим редактирования, и если мы обновляем страницу sh или если мы очищаем имя и вводим то же имя снова, форма снова отправляет асин c запрос на проверку имени, и я хочу чтобы остановить его.

Теперь существует множество грязных способов остановить вызов asyn c, даже если я могу обработать его на стороне сервера, но я не хочу отправлять дополнительный запрос на сервер, если введенное имя совпадает с предыдущим именем

TS

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as $ from 'jquery'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import Swal from 'sweetalert2'
import { CompanyInformation } from 'src/app/data/models/company/company-Information.model';
import { CompanyApiService } from '../../service/company-api.service';
import { Observable } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-company-information',
  templateUrl: './company-information.component.html',
  styleUrls: ['./company-information.component.css'],
  providers: [CompanyApiService]
})
export class CompanyInformationComponent implements OnInit {
  companyInfo: CompanyInformation;
  companyInfoForm: FormGroup;
  isEdit: boolean = false;

constructor(private apiService: CompanyApiService,private modalService: NgbModal) { }

ngOnInit() {
  //Call these function when the page load
  this.createCompanyInfoForm(); //Create company information reactive form
}

//Create company information form
createCompanyInfoForm() {
  this.companyInfoForm = new FormGroup({
  'companyName': new FormControl(null, {
    validators: [Validators.required],
    updateOn: 'blur',
    asyncValidators: this.checkDuplicateCompany.bind(this)
    }),
  })
}

//Check duplicate company name
checkDuplicateCompany(control: FormControl): Promise<any> | Observable<any> {
 const promise = new Promise<any>((resolve, reject) => {
  this.apiService.checkDuplicateCompany(control.value)
    .subscribe((data: BaseEntityModel<CompanyInformation>) => {
      if (data.status === 1) {
        //Return resolve
        resolve({ 'duplicateCompany': true });
      } else {
        resolve(null);
      }
    }, err => {
      //Show error toast message
      this.msgService.showToastMessage('error', err.statusText);
    });
 });
 return promise;
}

//Save
saveComInfo() {
 //Call the API if in save mode
 if (!this.isEdit) {
  //If form is valid
  if (this.companyInfoForm.valid) {
    //Insert all form data to CompanyInformation model
    this.companyInfo = new CompanyInformation(this.companyInfoForm.value);
    //Set companyId if available
    this.companyInfo.companyID = this.datashareService.getCompanyId;
    //Call the service
    this.apiService.saveCompany(this.companyInfo)
      .subscribe((data: BaseEntityModel<CompanyInformation>) => {
         //If save success
         if (data.status === 0) {
           if (data.entity.length > 0) {
           this.datashareService.setCompanyId(data.entity[0]);
         }
          //Change the edit flag value
          this.isEdit = !this.isEdit;
          //Disable the form
          this.companyInfoForm.disable();
        } else {
           //Show error message
           this.msgService.showToastMessage('error', data.message);
        }
    }, (err: any) => {
      //Show error message
      this.msgService.showToastMessage('error', err.statusText)
    });
  } else {
    //Mark all fields as touched to display validation
    this.companyInfoForm.markAllAsTouched();       
  }
} else { // If edit in edit mode
   //Change the edit flag value
   this.isEdit = !this.isEdit;
   //Enable the form
   this.companyInfoForm.enable();
  }
}

Answer 1

Что если вы привязываете asyncValidators в соответствии с режимом, скажем, в режиме переменной есть переключатель «добавить» / «редактировать». Режим может быть заменен на «редактировать» после отправки формы.

let mode = 'add'; //initialize with 'add' then switch to edit after submit.
createCompanyInfoForm() {
  this.companyInfoForm = new FormGroup({
  'companyName': new FormControl(null, {
    validators: [Validators.required],
    updateOn: 'blur',
    asyncValidators: this.mode == 'add' ? this.checkDuplicateCompany.bind(this) : call_different_method_to_bind
    }),
  })
}