uri-value.component.html

<span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
    <span class="rm-value">
        <a class="link" target="_blank" rel="noopener" href="{{valueFormControl.value}}">{{ label ? label : valueFormControl.value}}</a>
    </span>
    <span class="rm-comment" *ngIf="shouldShowComment">{{commentFormControl.value}}</span>
</span>
<ng-template #showForm>
    <span [formGroup]="form">
        <mat-form-field class="large-field child-value-component" floatLabel="never">
            <input matInput [formControlName]="'value'" class="value" placeholder="Uri value" type="url" [errorStateMatcher]="matcher">
            <mat-error *ngIf="valueFormControl.hasError('valueNotChanged') &&
                (valueFormControl.touched || valueFormControl.dirty)">
                <span class="custom-error-message">New value must be different than the current value.</span>
            </mat-error>
            <mat-error *ngIf="valueFormControl.hasError('pattern')">
                <span class="custom-error-message">New value must be a valid URI.</span>
            </mat-error>
             <mat-error *ngIf="valueFormControl.hasError('required')">
                A URI value is <strong>required</strong>.
            </mat-error>
            <mat-error *ngIf="valueFormControl.hasError('duplicateValue')">
                <span class="custom-error-message">This value already exists for this property. Duplicate values are not allowed.</span>
            </mat-error>
        </mat-form-field>
        <mat-form-field class="large-field value-component-comment">
            <textarea
                matInput
                class="comment"
                placeholder="Comment"
                spellcheck="false"
                [cdkTextareaAutosize]="true"
                [cdkAutosizeMinRows]="1"
                [cdkAutosizeMaxRows]="6"
                [formControlName]="'comment'">
            </textarea>
        </mat-form-field>
    </span>
</ng-template>