запускать настраиваемый валидатор на мат-ошибке в angular - PullRequest
Новая
       41

запускать настраиваемый валидатор на мат-ошибке в angular

0 голосов
/ 20 июня 2020

У меня есть значение поля формы, которое добавляется в таблицу. Мне нужно показать две проверки. требуется один, который сейчас работает. а другой - настраиваемая проверка, когда он уже добавлен в таблицу. Я создал логическое значение, которое является истинным, когда значение уже находится в данных массива в таблице. как я могу реализовать эту вторую, настраиваемую проверку? это то, что я пробовал до сих пор, но не работал. есть ли для этого более простой способ? спасибо

HTML

    <mat-form-field >
    <mat-select formControlName="serviceName" placeholder="Service Type" (selectionChange)="onServiceSelectionChanged($event)">
    <mat-option *ngFor="let service of allServicesFromDB" [value]="service.id">
    {{service.name}}
    </mat-option>
    </mat-select>
    <mat-error>{{getServiceErrorMessage()}}</mat-error>
    </mat-form-field>

TS 

  createFormServices() {
            this.servicesFormGroup = this.fb.group({
              id: [0],
              serviceName:  ['',Validators.required],
              trackingMethod: ['',Validators.required],
              qtyTotal:  ['',Validators.required], 
            });
    }

Ошибки запуска только при нажатии кнопки addToTable 

  addToTable() {
     const serviceControls = this.servicesFormGroup.controls;

     //should trigger error when true
     this.serviceAlreadyAdded = this.servicesTableData.some(x => x.serviceId === this.servicesFormGroup.value.serviceName);

      if(this.servicesFormGroup.invalid) {
        Object.keys(serviceControls).forEach(controlName =>
          serviceControls[controlName].markAsTouched());

          this.getServiceErrorMessage()
          return;
      }
      else if(this.serviceAlreadyAdded) {
        Object.keys(serviceControls).forEach(controlName =>
          serviceControls[controlName].markAsTouched());

          this.getServiceErrorMessage()
          return;
      }
      else {  
        //populate table
    }

моя функция 

getServiceErrorMessage() {
  var x = this.servicesFormGroup.controls['serviceName'].hasError('required') ? 'Service is required' :
  this.serviceAlreadyAdded ? 'Service already added' :
     '';
  return x
}
...