AlexAegis/loreplotter

<div [formGroup]="control" [ngClass]="{ existing: existing }" class="group">
    <mat-form-field hideRequiredMarker *ngIf="!existing" floatLabel="never" required>
        <input matInput formControlName="key" type="text" />
        <mat-error *ngIf="control.controls['key']?.hasError('required')">Required</mat-error>
        <mat-error *ngIf="control.controls['key']?.hasError('duplicate')">Duplicate</mat-error>
    </mat-form-field>
    <mat-label *ngIf="existing">{{ originalKey }}</mat-label>
    <mat-form-field floatLabel="never">
        <input [placeholder]="originalValue" formControlName="value" matInput type="text" />
    </mat-form-field>
    <button
        aria-label="Toggle Forget Entry"
        mat-flat-button
        *ngIf="existing"
        [ngClass]="{ forget: (control?.controls)['forget']?.value }"
        (click)="changeForget($event)"
    >
        <fa-icon [icon]="forgetIcon"></fa-icon>
    </button>

    <button
        aria-label="Remove Temporary Entry"
        mat-flat-button
        *ngIf="!existing"
        class="forget"
        (click)="remove($event)"
    >
        <fa-icon [icon]="removeIcon"></fa-icon>
    </button>
</div>