noydb/oworms-ui

<h5 [class.hidden]="loading">{{ title }}</h5>

<form [class.hidden]="loading" [formGroup]="form">

    <div>
        <fieldset>
            <input [required]="!viewOnly"
                   formControlName="word"
                   name="word"
                   placeholder="word"
                   [class.error]="!!getError('theWord')" />
            <span [class.show]="getError('theWord')">{{ getError('theWord') }}</span>
        </fieldset>
        <fieldset>
            <ow-select titleLabel="part of speech"
                       (valueChange)="selectPartOfSpeech($event)"
                       [disabled]="viewOnly"
                       [values]="selectedPos"
                       [options]="posOptions"
                       [transparent]="true" />
        </fieldset>
        <fieldset>
            <textarea [required]="true"
                      formControlName="definition"
                      name="definition"
                      placeholder="definition"
                      [class.error]="!!getError('definition')"></textarea>
            <span [class.show]="getError('definition')">{{ getError('definition') }}</span>
        </fieldset>
        <fieldset>
            <textarea formControlName="origin"
                      name="origin"
                      placeholder="origin"
                      rows="7"
                      [class.error]="!!getError('origin')"></textarea>
            <span [class.show]="getError('origin')">{{ getError('origin') }}</span>
        </fieldset>
    </div>

    <div>
        <fieldset>
            <textarea formControlName="exampleUsage"
                      name="exampleUsage"
                      placeholder="example"
                      [class.error]="!!getError('exampleUsage')"></textarea>
            <span [class.show]="getError('exampleUsage')">{{ getError('exampleUsage') }}</span>
        </fieldset>
        <fieldset>
            <textarea formControlName="discoveredAt"
                      name="discoveredAt"
                      placeholder="Where did you first see/hear this word?"
                      [class.error]="!!getError('discoveredAt')"></textarea>
            <span [class.show]="getError('discoveredAt')">{{ getError('discoveredAt') }}</span>
        </fieldset>
        <fieldset>
            <input formControlName="pronunciation"
                   name="pronunciation"
                   placeholder="pronunciation"
                   [class.error]="!!getError('pronunciation')" />
            <span [class.show]="getError('pronunciation')">{{ getError('pronunciation') }}</span>
        </fieldset>
        <fieldset>
            <ow-select titleLabel="tags"
                       (valueChange)="selectTags($event)"
                       [multiSelect]="true"
                       [values]="selectedTags"
                       [options]="tagOptions$ | async"
                       [transparent]="true" />
        </fieldset>
        <fieldset>
            <textarea formControlName="note"
                      name="note"
                      placeholder="note"
                      [class.error]="!!getError('note')"></textarea>
            <span [class.show]="getError('note')">{{ getError('note') }}</span>
        </fieldset>
    </div>

</form>

<div [class.hidden]="loading" *ngIf="!viewOnly" id="actions">
    <button (click)="onBtnClick()" [disabled]="disabled">
        {{ btnText }}
    </button>
    <button (click)="onBtnClick(true)" class="below transparent">
        {{ secondBtnText }}
    </button>
</div>