如何在 Angular 7 中使用返回类型为 true 或 false 的自定义正则表达式验证来验证文本

Question

I am new to Angular development. I have the following requirements. In case of text field, we need to validate the data entered in the text field with a regular expression with some extra validation. In the .html file, the existing code is like this.

<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>

In the corresponding .ts file, the code is like this.

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

There are few new requirements so that I have to strip the contents of the html text and I have to do some manipulations before performing regular expression match.

SO I want to write method like this.

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;
      }

Is it possible in case of Angular 7 ? Please suggest and help me to achieve it. This is the way I want to do custom regex validation instead of directly passing a regular expression.

Answer 1

It is not possible to give extra validations aside from regex patterns in [pattern] or pattern attribute in Angular as per my knowledge. The best way to handle it is using traditional (change) event in the html input tag and corresponding function call from component file. Add a boolean flag isInvalidDomain which will set to true when the pattern along with your conditions after doing your manipulations are not matching and set to false if validations are matching.

sample.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;
       }
    }