Как проверить текст с помощью пользовательской проверки регулярных выражений с типом возврата как true или false в Angular 7

Question

Я новичок в Angular разработке. У меня есть следующие требования. В случае текстового поля нам нужно проверить данные, введенные в текстовое поле, с помощью регулярного выражения с некоторой дополнительной проверкой. В файле. html существующий код выглядит следующим образом.

<input type="text" id="domainName" [pattern]="validateDomain()" [placeholder]="ComputeIPAddressMessages.DOMAIN_NAME_PLACEHOLDER" name="domainName" class="form-control"
              [(ngModel)]="computeIPAddress.domainName" [disabled]="disabledComponent" #domainNameModel="ngModel"
               size="20" required>
<span class="tooltip-content">
            {{ComputeIPAddressMessages.INVALID_DOMAIN_NAME}}
            </span>

В соответствующем файле .ts код выглядит следующим образом.

public validateDomain(): any {
    return CommonConstants.DOMAIN_NAME_REGEX;
  }

Есть несколько новых требования, чтобы я должен был удалить содержимое текста html и выполнить некоторые манипуляции перед выполнением сопоставления с регулярным выражением.

ТАК Я хочу написать такой метод.

public validateDomain(): any {
        // Check if the domain name already exists or not
        // If the domain name start with .(period) or -(hyphen), remove it
        // Other check

        // perform some regular expression validation
       // Return either true or false
        return true or false;
      }

Возможно ли это в случае Angular 7? Пожалуйста, предложите и помогите мне достичь этого. Именно так я хочу выполнить пользовательскую проверку регулярных выражений вместо прямой передачи регулярного выражения.

Answer 1

Невозможно дать дополнительные проверки кроме шаблонов регулярных выражений в [шаблон] или атрибута шаблонов в Angular, насколько мне известно. Лучший способ справиться с этим - использовать традиционное событие (изменить) во входном теге html и соответствующий вызов функции из файла компонента. Добавьте логический флаг isInvalidDomain , который будет установлен в true , когда шаблон вместе с вашими условиями после выполнения ваших манипуляций не совпадает, и будет установлен в false , если проверки соответствуют ,

образец. html

<input type="text" id="domainName" (change)="validateDomain()" [placeholder]="ComputeIPAddressMessages.DOMAIN_NAME_PLACEHOLDER" name="domainName" class="form-control" [(ngModel)]="computeIPAddress.domainName" [disabled]="disabledComponent" #domainNameModel="ngModel" size="20" required>
<span class="tooltip-content" *ngIf="isInvalidDomain"> {{ComputeIPAddressMessages.INVALID_DOMAIN_NAME}}
</span>

yourcomponent.ts

isInvalidDomain :boolean = false;
    validateDomain(){
       if(condition1 == true){
          if(computeIPAddress.domainName.test(CommonConstants.DOMAIN_NAME_REGEX)){
              this.isInvalidDomain = false;
            // success condition code
          } else {
              this.isInvalidDomain = true;
           }
       } else {
              this.isInvalidDomain = true;
       }
    }