ra.component.html

<div class="row px-3">
    <label>RA</label>
    <div class="input-group">
        <input type="text" class="form-control" [formControl]="raDegree" (input)="raChange()" autocomplete="off">
        <div class="input-group-append">
            <span class="input-group-text">°</span>
        </div>
    </div>
</div>

<div class="row mt-2 px-3">
    <div class="col px-0 pr-xl-1">
        <div class="input-group">
            <input type="text"
                   class="form-control"
                   [formControl]="raH"
                   (input)="raChange()"
                   (focusin)="changeFocus('rah', true)"
                   (focusout)="changeFocus('rah', false)"
                   (change)="setToDefaultValue()"
                   autocomplete="off">
            <div class="input-group-append">
                <span class="input-group-text">H</span>
            </div>
        </div>
    </div>
    <div class="w-100 d-block d-xl-none"></div>
    <div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
        <div class="input-group">
            <input type="text"
                   class="form-control"
                   [formControl]="raM"
                   (input)="raChange()"
                   (focusin)="changeFocus('ram', true)"
                   (focusout)="changeFocus('ram', false)"
                   (change)="setToDefaultValue()"
                   autocomplete="off">
            <div class="input-group-append">
                <span class="input-group-text">'</span>
            </div>
        </div>
    </div>
    <div class="w-100 d-block d-xl-none"></div>
    <div class="col mt-1 mt-xl-auto px-0">
        <div class="input-group">
            <input type="text"
                   class="form-control"
                   [formControl]="raS"
                   (input)="raChange()"
                   (focusin)="changeFocus('ras', true)"
                   (focusout)="changeFocus('ras', false)"
                   (change)="setToDefaultValue()"
                   autocomplete="off">
            <div class="input-group-append">
                <span class="input-group-text">''</span>
            </div>
        </div>
    </div>
</div>

<div *ngIf="raDegree.invalid" class="row px-3 text-danger">
    <div *ngIf="raDegree.errors.nan">
        {{ raDegree.errors.nan.value }}
    </div>
    <div *ngIf="raDegree.errors.range" [hidden]="raDegree.errors.nan">
        {{ raDegree.errors.range.value }}
    </div>
</div>
<div *ngIf="raH.invalid" class="row px-3 text-danger">
    <div *ngIf="raH.errors.nan">
        {{ raH.errors.nan.value }}
    </div>
    <div *ngIf="raH.errors.range" [hidden]="raH.errors.nan">
        {{ raH.errors.range.value }}
    </div>
</div>
<div *ngIf="raM.invalid" class="row px-3 text-danger">
    <div *ngIf="raM.errors.nan">
        {{ raM.errors.nan.value }}
    </div>
    <div *ngIf="raM.errors.range" [hidden]="raM.errors.nan">
        {{ raM.errors.range.value }}
    </div>
</div>
<div *ngIf="raS.invalid" class="row px-3 text-danger">
    <div *ngIf="raS.errors.nan">
        {{ raS.errors.nan.value }}
    </div>
    <div *ngIf="raS.errors.range" [hidden]="raS.errors.nan">
        {{ raS.errors.range.value }}
    </div>
</div>