See: https://learntech.imsu.ox.ac.uk/blog/angular-reactive-form-custom-validator-for-orcid/

edit-user.component.html

<div fxLayout="row" fxLayoutAlign='center top'>
    <div fxFlex class="form-container">
        <h2>Edit your profile</h2>
        <form [formGroup]="userForm">
            ...
            <mat-form-field class="full-width" appearance="outline">
                <mat-label>ORCID ID</mat-label>
                <input id="orcid" matInput placeholder="https://orcid.org/xxxx-xxxx-xxxx-xxxx" formControlName="orcid">
                <mat-error *ngIf="orcid.errors?.pattern && (orcid.dirty || orcid.touched)">ORCID ids start with https://orcid.org/</mat-error>
                <mat-error *ngIf="orcid.errors?.isORCID && (orcid.dirty || orcid.touched)">Please check your id carefully - see <a href="https://support.orcid.org/knowledgebase/articles/116780-structure-of-the-orcid-identifier" target="_blank">Structure of the ORCID Identifier</a></mat-error>
            </mat-form-field>
            ...
        </form>
    </div>
</div>