JavaScript

@Component({
    templateUrl: 'residentialRegistration.component.html'
})
export class ResidentialRegistrationComponent extends ComponentBase {
    private _lsKey: string = 'OnlineRegistration.LS';

    public OnlineRegistration: OnlineRegistration = new OnlineRegistration();
    public NoOfInvalidAttempts: number = 0;
    public RegexValidationType = RegexValidationType;
    public EmitEvent: boolean = false;
    public RouteName: string = '';
    public MaskingResource: MaskingResource = new MaskingResource();

    public IdentificationType: IdentificationType = IdentificationType.PhoneNumber;
    public VerificationType: VerificationType = VerificationType.Last4DigitsOfSSN;

    public IsIdentifiedByAcctNumber: boolean = false;
    public IsIdentifiedByPhoneNumber: boolean = false;
    public IsVerifiedByLast4DigitsOfDriversLicenseOrStateId: boolean = false;
    public IsVerifiedByLast4DigitsOfSSN: boolean = false;

    constructor(private _ls: PgeLocalStorage_PROVIDER<OnlineRegistration>,
        private _pgeRoute: PgeRoute,
        private _activatedRoute: ActivatedRoute
        //,public MaskingResource: MaskingResource
    ) {
        super();
        this.initialize();
    }

    public initialize(): void {
        let lsData = this._ls.getEncrypted(this._lsKey);
        if (lsData !== null && lsData !== undefined) {
            this.OnlineRegistration = lsData;
            //this.IsIdentifiedByAcctNumber = false;
            //this.IsVerifiedByLast4DigitsOfDriversLicenseOrStateId = false;
            this.IdentificationType = IdentificationType.PhoneNumber;
            this.VerificationType = VerificationType.Last4DigitsOfSSN;
        }
        else {
            debugger;
            this._pgeRoute.redirectToError();
        }
    };

    public onAccountVerificationCompleted(verificationValidation: VerificationValidation): void {
        if (verificationValidation.FormValid && !verificationValidation.AccountVerificationValid) {
            this.NoOfInvalidAttempts += 1;
        }
        else if (verificationValidation.FormValid && verificationValidation.AccountVerificationValid) {
            this._pgeRoute.navigateToSibling('Success', this._activatedRoute);
        }
    }

    public onModelChange(): void {
        debugger;
        if (this.IdentificationType === IdentificationType.PhoneNumber) {
            this.IsIdentifiedByPhoneNumber = true;
            this.IsIdentifiedByAcctNumber = false;
        }
        else if (this.IdentificationType === IdentificationType.AccountNumber) {
            this.IsIdentifiedByPhoneNumber = false;
            this.IsIdentifiedByAcctNumber = true;
        }
        if (this.VerificationType === VerificationType.Last4DigitsOfSSN)
            this.IsVerifiedByLast4DigitsOfSSN = true;
        else if (this.VerificationType === VerificationType.Last4DigitsOfDriversLicenseOrStateId)
            this.IsVerifiedByLast4DigitsOfDriversLicenseOrStateId = true;
    }

<form name="residentialRegistrationForm" id="residentialRegistrationForm" novalidate #residentialRegistrationForm="ngForm" (submit)="onNext(residentialRegistrationForm.valid)">
    <div id="subHeaderText">
        {{ 'OnlineRegistration.SignUpToAccess' | Translate }}
        <a class="da-click" data-da-event="telephoneClick" href="tel:800-542-8818">
            {{ 'Common.CustomerServiceNumber' | Translate }}
        </a>.
        <br />
        <br />
        {{ 'OnlineRegistration.BusinessWithMoreAccounts' | Translate }}
        <a href="http://www.portlandgeneral.com/~/link.aspx?_id=B31F170826494FC88B776CBA1E49431F&_z=z">
            {{ 'OnlineRegistration.WorkWithMultipleAccounts' | Translate }}
        </a>.
    </div>
    <fieldset>
        <ol>
            <li>
                <br />
                <ol>
                    <li>
                        <div id="IdentifyLabel">Identify the PGE account:</div>
                    </li>
                    <li *ngIf="NoOfInvalidAttempts > 2">
                        <div class="field-validation-error" id="onlineHelpText">
                            {{ 'ResidentialView.Validator.OnlineHelp1' | Translate}}{{ 'ResidentialView.Validator.OnlineHelp2' | Translate}}{{ 'ResidentialView.Validator.OnlineHelp3' | Translate}}
                        </div>
                    </li>
                    <li>
                        <div class="two-up">
                            <input id="byPhoneNumberOption" name="identificationByOption" type="radio" class="ng-untouched ng-pristine ng-valid" [value]="IdentificationType.PhoneNumber"
                                   [checked]="IsIdentifiedByPhoneNumber"
                                   [(ngModel)]="IdentificationType" (ngModelChange)="onModelChange()" />
                            <label for="byPhoneNumberOption" id="byPhoneNumberLabel" name="byPhoneNumberLabel">{{'AccountVerification.PhoneNumber' | Translate}}</label>
                            {{IsIdentifiedByPhoneNumber}}
                            <div id="divPhoneIdentification" *ngIf="IsIdentifiedByPhoneNumber">
                                <div *ngIf="(residentialRegistrationForm.submitted || phoneNumberInput.touched)">
                                    <div id="phoneNumberInputRequired" name="phoneNumberInputRequired" class="field-validation-error" *ngIf="phoneNumberInput.errors !== null && phoneNumberInput.errors.required">{{'Common.Validator.PhoneNumberRequired' | Translate}}</div>
                                    <div id="phoneNumberInputRequired1" name="phoneNumberInputInvalid" class="field-validation-error" *ngIf="phoneNumberInput.errors !== null && phoneNumberInput.errors.regexValidator">{{'Common.Validator.PhoneNumberInvalid' | Translate}}</div>
                                </div>
                                <input id="phoneNumberInput"
                                       name="phoneNumberInput"
                                       type="tel"
                                       #phoneNumberInput="ngModel"
                                       placeholder="(___) ___-____"
                                       requiredValidator
                                       [textMask]="{ mask: MaskingResource.Phone }"
                                       (ngModelChange)="onInputChanged()"
                                       [(ngModel)]="OnlineRegistration.PhoneNumber"
                                       regexValidator="OnlineRegistration.PhoneNumber"
                                       [regexType]="RegexValidationType.Phone"
                                       pgeAutoMaskingCursor
                                       [ngClass]="{ 'ng-blurred' : residentialRegistrationForm.submitted || phoneNumberInput.touched }" />
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="two-up">
                            <input type="radio" id="byAccountNumberOption" name="identificationByOption" [value]="IdentificationType.AccountNumber"
                                   [checked]="IsIdentifiedByAcctNumber"
                                   [(ngModel)]="IdentificationType" (ngModelChange)="onModelChange()" />
                            <label id="byAccountNumberLabel" name="byAccountNumberLabel" for="byAccountNumberOption">{{'Common.AccountNumber' | Translate}}</label>
                            {{IsIdentifiedByAcctNumber}}
                            <div id="divAccountIdentification" *ngIf="IsIdentifiedByAcctNumber">
                                <div *ngIf="(residentialRegistrationForm.submitted || accountNumberInput.touched )">
                                    <div id="accountNumberInputRequired" name="accountNumberInputRequired" class="field-validation-error" *ngIf="accountNumberInput.errors !== null && accountNumberInput.errors.required">{{'Common.Validator.EnterValidAccountNumber' | Translate}}</div>
                                    <div id="accountNumberInputInvalid" name="accountNumberInputInvalid" class="field-validation-error" *ngIf="accountNumberInput.errors !== null && accountNumberInput.errors.regexValidator">{{'Common.Validator.EnterValidAccountNumber' | Translate}}</div>
                                </div>
                                <input type="tel"
                                       id="accountNumberInput"
                                       name="accountNumberInput"
                                       #accountNumberInput="ngModel"
                                       placeholder="__________"
                                       requiredValidator
                                       regexValidator="OnlineRegistration.AccountNumber"
                                       [regexType]="RegexValidationType.AccountNumber"
                                       [textMask]="{ mask: MaskingResource.AccountNumber }"
                                       pgeAutoMaskingCursor
                                       (ngModelChange)="onInputChanged()"
                                       [(ngModel)]="OnlineRegistration.AccountNumber"
                                       [ngClass]="{ 'ng-blurred' : residentialRegistrationForm.submitted || accountNumberInput.touched }" />
                            </div>
                        </div>
                    </li>
                </ol>
            </li>
        </ol>
    </fieldset>
</form>
<browser-back [lastpage]="false" redirecturl="/AccountInformation"></browser-back>

public onModelChange(): void {
    debugger;
    if (this.IdentificationType === IdentificationType.PhoneNumber) {
        this.IsIdentifiedByPhoneNumber = true;
        this.IsIdentifiedByAcctNumber = false;
    }
    else if (this.IdentificationType === IdentificationType.AccountNumber) {
        this.IsIdentifiedByPhoneNumber = false;
        this.IsIdentifiedByAcctNumber = true;
    }
    if (this.VerificationType === VerificationType.Last4DigitsOfSSN)
        this.IsVerifiedByLast4DigitsOfSSN = true;
    else if (this.VerificationType === VerificationType.Last4DigitsOfDriversLicenseOrStateId)
        this.IsVerifiedByLast4DigitsOfDriversLicenseOrStateId = true;
}

guardar
<span class="badge btn-success" id="resultado"></span>

I am calling a third-party API to get customer contact information and it returns a string for each field and my application needs to determine if the string is a phone number or Email or web address

    String data=GetCustomerInfoFromAPI() // will get customer contact information from an API call and will return a string

some examples for the data string I am getting back from the API call
"www.google.com"
"602.123.1778"
"John@gmail.com"

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function LoginToAccount() {
    window.open("LogIn/LoginForm.html", "","width=350,height=150")
}
//-->
</SCRIPT>

[Route("api/PeakTimeRebate")]
public class PeakTimeRebateController : Controller
{
    [HttpGet("GetTransactionStatus")]
    [DecryptoFilter]
    public IActionResult GetTransactionStatus(string EncryptedAccountNumber)
    {
        this.Response.ContentType = "text/html";
        int randVal = new Random().Next(0, 10);

        if ((randVal == 1) || (randVal == 2) || (randVal == 3) || (randVal == 5) || (randVal == 7))
            return new ObjectResult("Prime");
        if (randVal % 2 == 0)
        {
            return new ObjectResult("Even");
        }
        else
        {
            return new ObjectResult("Odd");
        }
    }
}

@Injectable()
export class PeakTimeRebatesService extends ServiceBase {
    private _peaktimerebateTransactionStatusUrl: string = '/api/PeakTimeRebate/GetTransactionStatus';

    constructor(public _http: PgeCustomHttp) {
        super(_http);
    }

    public peakTimeRebateTransactionStatus(encryptedAccountNumber: string): Observable<string> {
        debugger;
        const params: URLSearchParams = new URLSearchParams(); //'EncryptedAccountNumber', new PgeCustomQueryEncoder()
        params.set('EncryptedAccountNumber', encryptedAccountNumber);

        const options = new RequestOptions({ search: params });

        return this._http.get(this._peaktimerebateTransactionStatusUrl, options)
            .map(this.extractBoolean)
            .catch(this.handleError);
    };
};

import { PeakTimeRebatesService } from '../peakTimeRebates/peakTimeRebates.service'; //Importing my Service


@Component({
    selector: 'transactionSuccessful-message',
    templateUrl: 'transactionSuccessful.component.html'
})

export class TransactionSuccessfulComponent extends ComponentBase {
    @Input()
    public TransactionMessage: string = '';
    public TransactionSuccessStatus = false;
    public TransactionExceptionStatus = false;
    private max: number = 10; private min: number = 0; private randVal: number; private checkStatMessage: string;

    @Input()
    public get EncryptedAccountNumber() {
        debugger;
        return this._encryptedAccountNumber;
    }

    public set EncryptedAccountNumber(value: string) {
        debugger;
        if ((value == null) || (value == '')) {
            value = 'XYZ'
        }
        this._encryptedAccountNumber = value;
        if (this.EncryptedAccountNumber !== '') {
            this.peakTimeRebateTransactionStatus(this.EncryptedAccountNumber);            
        }
    }

    private _encryptedAccountNumber: string = '';

    public constructor(
        private _service: PeakTimeRebatesService       
    ) {        
        super();
        debugger;
    }


    private peakTimeRebateTransactionStatus(encryptedAccountNumber: string): void {
        debugger;
        this._service.peakTimeRebateTransactionStatus(encryptedAccountNumber).subscribe((peakTimeRebateTransactionStatus: any) => {
            this.TransactionMessage = peakTimeRebateTransactionStatus;           
        });
    }


    ngOnInit(): void {
        debugger;
        this.EncryptedAccountNumber = '';      
        if (this.TransactionMessage == "Prime")
        {
            this.TransactionSuccessStatus = true;
        }
        else if (this.TransactionMessage == "Even")
        {
            this.TransactionSuccessStatus = false;
        }
        else
        {
            this.TransactionExceptionStatus = true;
        }
    }
}	

<div class="layout-two-column">
    <section class="layout-primary">
        <form #payBillSuccessForm="ngForm" id="payBillSuccessForm" name="payBillSuccessForm" novalidate>

            <div *ngIf="TransactionSuccessStatus">
                <h2 id="transactionSucessfulText">{{ 'Common.EnrollmentSuccessful' | Translate }}</h2>
            </div>

            <div *ngIf="!TransactionSuccessStatus">
                <h2 id="transactionFailedText">{{ 'PeakTimeRebatesView.EnrollmentSuccessMessage' | Translate }}</h2>
            </div>

            <div *ngIf="TransactionExceptionStatus">
                <h2 id="transactionExceptionText">{{ 'PeakTimeRebatesView.PeakTimeRebatesHeader' | Translate }}</h2>
            </div>

            <div class="divider-invisible text-right">
                <a class="btn" routerLink="/AccountInformation" id="doneButton">{{ 'Common.Done' | Translate }}</a>
            </div>
        </form>
    </section>
</div>
<browser-back [lastpage]="true"></browser-back>

<style>

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}