feat(admin-ui): Create FormFieldComponent

admin-ui/src/app/shared/components/form-field/form-field-control.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Optional, Self } from '@angular/core';
+import { FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+
+@Directive({selector: 'input, textarea, select'})
+export class FormFieldControlDirective {
+    formControl: FormControl;
+    constructor(@Optional() private formControlName: FormControlName) {}
+
+    get valid(): boolean {
+        return !!this.formControlName.valid;
+    }
+
+    get touched(): boolean {
+        return !!this.formControlName.touched;
+    }
+}

admin-ui/src/app/shared/components/form-field/form-field.component.html

@@ -0,0 +1,13 @@
+<div class="form-group">
+    <label [for]="for">{{ label }}</label>
+    <label [for]="for"
+           aria-haspopup="true"
+           role="tooltip"
+           [class.invalid]="formFieldControl.touched && !formFieldControl.valid"
+           class="tooltip tooltip-validation tooltip-sm tooltip-top-left">
+        <ng-content></ng-content>
+        <span class="tooltip-content">
+            {{ label }} is required.
+        </span>
+    </label>
+</div>

admin-ui/src/app/shared/components/form-field/form-field.component.scss

@@ -0,0 +1,14 @@
+:host {
+    display: block;
+    .form-group > label:nth-of-type(2) {
+        flex: 1;
+        max-width: 20rem;
+
+        ::ng-deep > *:not(.tooltip-content) {
+            width: 100%;
+        }
+    }
+    .form-group .tooltip-validation {
+        height: initial;
+    }
+}

admin-ui/src/app/shared/components/form-field/form-field.component.ts

@@ -0,0 +1,17 @@
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Input } from '@angular/core';
+import { FormFieldControlDirective } from './form-field-control.directive';
+
+/**
+ * A form field wrapper which handles the correct layout and validation error display for
+ * a form control.
+ */
+@Component({
+    selector: 'vdr-form-field',
+    templateUrl: './form-field.component.html',
+    styleUrls: ['./form-field.component.scss'],
+})
+export class FormFieldComponent {
+    @Input() label: string;
+    @Input() for: string;
+    @ContentChild(FormFieldControlDirective) formFieldControl: FormFieldControlDirective;
+}

admin-ui/src/app/shared/shared.module.ts

@@ -6,6 +6,8 @@ import { ClarityModule } from '@clr/angular';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { DataTableColumnComponent } from './components/data-table/data-table-column.component';
 import { DataTableComponent } from './components/data-table/data-table.component';
+import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
+import { FormFieldComponent } from './components/form-field/form-field.component';
 import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
 
@@ -19,7 +21,12 @@ const IMPORTS = [
 ];
 
 const DECLARATIONS = [
-    DataTableComponent, DataTableColumnComponent, PaginationControlsComponent, TableRowActionComponent,
+    DataTableComponent,
+    DataTableColumnComponent,
+    PaginationControlsComponent,
+    TableRowActionComponent,
+    FormFieldComponent,
+    FormFieldControlDirective,
 ];
 
 @NgModule({