feat(field): add ly-error

A-l-y-l-e · Dec 30, 2018 · c5c12be · c5c12be
1 parent cfa8669
commit c5c12be
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 229 deletions.
diff --git a/src/app/docs/components/field-demo/field-playground/field-playground.component.html b/src/app/docs/components/field-demo/field-playground/field-playground.component.html
@@ -1,76 +1,81 @@
-<p>
-  <ly-radio-group [formControl]="appearance">
-    <span>Appearance:</span>
-    <ly-radio value="standard" checked>Standard</ly-radio>
-    <ly-radio value="outlined">Outlined</ly-radio>
-    <ly-radio value="filled">Filled</ly-radio>
-  </ly-radio-group>
-</p>
+<ly-radio-group [formControl]="appearance">
+  <span>Appearance:</span>
+  <ly-radio value="standard" checked>Standard</ly-radio>
+  <ly-radio value="outlined">Outlined</ly-radio>
+  <ly-radio value="filled">Filled</ly-radio>
+</ly-radio-group>
 
 <ly-checkbox
   [formControl]="isDisabled"
   (change)="$event.checked ? password.disable() : password.enable()"
 >Is disabled</ly-checkbox>
 <ly-checkbox [formControl]="isReadonly">Is readonly</ly-checkbox>
 
-<p>
-  <ly-field [appearance]="appearance.value">
-    <input lyInput
-      placeholder="********"
-      [type]="hide ? 'password' : 'text'"
-      [formControl]="password"
-      [readonly]="isReadonly.value"
-    >
-    <ly-label>Enter your password</ly-label>
-    <button ly-button
-      appearance="icon"
-      lySuffix
-      (click)="hide = !hide"
-      [disabled]="isDisabled.value"
-    >
-      <ly-icon>{{ hide ? 'visibility' : 'visibility_off' }}</ly-icon>
-    </button>
-    <ly-hint>Hint</ly-hint>
-  </ly-field>
-</p>
+<ly-grid container alignItems="center" [spacingX]="16">
+  <ly-grid item [col]="'6 12@XSmall'">
+    <ly-field fullWidth #_field [appearance]="appearance.value">
+      <input
+        lyInput
+        placeholder="********"
+        [type]="hide ? 'password' : 'text'"
+        [formControl]="password"
+        [readonly]="isReadonly.value"
+      >
+      <ly-label>Enter your password</ly-label>
+      <button ly-button
+        appearance="icon"
+        lySuffix
+        (click)="hide = !hide"
+        [disabled]="isDisabled.value"
+        [color]="_field.errorState ? 'warn' : 'text'"
+      >
+        <ly-icon>{{ hide ? 'visibility' : 'visibility_off' }}</ly-icon>
+      </button>
+      <ly-hint>Hint</ly-hint>
+      <ly-hint [align]="'after'">{{ password.value?.length || 0 }}/8</ly-hint>
+      <ly-error *ngIf="password.hasError('minlength')">Min 8 characters</ly-error>
+      <ly-error *ngIf="password.hasError('required')">Required</ly-error>
+    </ly-field>
+  </ly-grid>
 
-<p>
-  <ly-field [appearance]="appearance.value" [style.width.px]="220">
-    <ly-label>Clearable</ly-label>
-    <input #_input
-      lyInput
-      [value]="'Text'"
-      placeholder="Placeholder"
-      type="text"
-      maxlength="10"
-    >
-    <ly-hint>Hint</ly-hint>
-    <ly-hint [align]="'after'">{{ _input.value?.length || 0 }}/10</ly-hint>
-    <button ly-button
-      *ngIf="_input.value"
-      appearance="icon"
-      lySuffix
-      (click)="_input.value = ''"
-    >
-      <ly-icon>close</ly-icon>
-    </button>
-  </ly-field>
-</p>
+  <ly-grid item [col]="'6 12@XSmall'">
+    <ly-field fullWidth [appearance]="appearance.value">
+      <ly-label>Clearable</ly-label>
+      <input #_input
+        lyInput
+        [value]="'Text'"
+        placeholder="Placeholder"
+        type="text"
+        maxlength="10"
+      >
+      <ly-hint>Hint</ly-hint>
+      <ly-hint [align]="'after'">{{ _input.value?.length || 0 }}/10</ly-hint>
+      <button ly-button
+        *ngIf="_input.value"
+        appearance="icon"
+        lySuffix
+        (click)="_input.value = ''"
+      >
+        <ly-icon>close</ly-icon>
+      </button>
+    </ly-field>
+  </ly-grid>
 
-<p>
-  <ly-field [appearance]="appearance.value">
-    <ly-label>Label</ly-label>
-    <ly-placeholder>Placeholder</ly-placeholder>
-    <textarea lyInput></textarea>
-    <ly-hint>Hint</ly-hint>
-  </ly-field>
-</p>
+  <ly-grid item [col]="'6 12@XSmall'">
+    <ly-field fullWidth [appearance]="appearance.value">
+      <ly-label>Label</ly-label>
+      <ly-placeholder>Placeholder</ly-placeholder>
+      <textarea lyInput></textarea>
+      <ly-hint>Hint</ly-hint>
+    </ly-field>
+  </ly-grid>
 
-<p>
-  <ly-field [appearance]="appearance.value" floatingLabel style="width: 125px">
-    <ly-label>Price</ly-label>
-    <span>$&nbsp;</span>
-    <input lyInput type="number" [value]="10">
-    <ly-hint>Hint</ly-hint>
-  </ly-field>
-</p>
+  <ly-grid item [col]="'6 12@XSmall'">
+    <ly-field [appearance]="appearance.value" floatingLabel style="max-width: 125px">
+      <ly-label>Price</ly-label>
+      <span>$&nbsp;</span>
+      <input lyInput type="number" [value]="10">
+      <ly-hint>Hint</ly-hint>
+    </ly-field>
+  </ly-grid>
+</ly-grid>
diff --git a/src/app/docs/components/field-demo/field-playground/field-playground.component.ts b/src/app/docs/components/field-demo/field-playground/field-playground.component.ts
@@ -11,5 +11,5 @@ export class FieldPlaygroundComponent {
   appearance = new FormControl();
   isReadonly = new FormControl();
   isDisabled = new FormControl();
-  password = new FormControl('', Validators.required);
+  password = new FormControl('', [Validators.required, Validators.minLength(8)]);
 }
diff --git a/src/app/docs/components/field-demo/field-playground/field-playground.module.ts b/src/app/docs/components/field-demo/field-playground/field-playground.module.ts
@@ -6,6 +6,7 @@ import { LyRadioModule } from '@alyle/ui/radio';
 import { LyIconModule } from '@alyle/ui/icon';
 import { LyButtonModule } from '@alyle/ui/button';
 import { LyCheckboxModule } from '@alyle/ui/checkbox';
+import { LyGridModule } from '@alyle/ui/grid';
 
 import { FieldPlaygroundComponent } from './field-playground.component';
 
@@ -18,7 +19,8 @@ import { FieldPlaygroundComponent } from './field-playground.component';
     LyRadioModule,
     LyIconModule,
     LyButtonModule,
-    LyCheckboxModule
+    LyCheckboxModule,
+    LyGridModule
   ],
   exports: [FieldPlaygroundComponent],
   declarations: [FieldPlaygroundComponent]

diff --git a/src/lib/field/field.html b/src/lib/field/field.html
@@ -10,16 +10,22 @@
         <ng-container *ngTemplateOutlet="_labelTemplate"></ng-container>
       </span>
     </div>
-    <div [className]="classes.placeholder" *ngIf="_isPlaceholder() && _isEmpty() && (_input.focused || floatingLabel)">
+    <div [className]="classes.placeholder" *ngIf="_isPlaceholder() && _isEmpty() && (_input._focused || floatingLabel)">
       <ng-container *ngTemplateOutlet="_placeholderTemplate"></ng-container>
     </div>
   </div>
   <div [className]="classes.suffix" *ngIf="_suffixChildren.length" #_suffixContainer>
     <ng-content select="[lySuffix]"></ng-content>
   </div>
 </div>
-<div [className]="classes.hint" *ngIf="_hintChildren.length">
-  <ng-content select="ly-hint"></ng-content>
+
+<div [className]="classes.hintContainer">
+  <div *ngIf="_hintChildren.length && (persistentHint || errorState || _input._focused)">
+    <span *ngIf="_input.errorState">
+      <ng-content select="ly-error"></ng-content>
+    </span>
+    <ng-content select="ly-hint"></ng-content>
+  </div>
 </div>
 
 <ng-template #_labelTemplate>