feat(formControl): now form control supports no validation mode.

GetTerminus · Feb 4, 2020 · ddad7ce · ddad7ce
1 parent 04ad382
commit ddad7ce
Show file tree

Hide file tree

Showing 29 changed files with 497 additions and 169 deletions.
diff --git a/demo/app/components/input/input.component.html b/demo/app/components/input/input.component.html
@@ -178,3 +178,21 @@ <h3 tsCardTitle tsVerticalSpacing>
 {{ textareaModel }}
 </pre>
 </ts-card>
+
+<ts-card tsVertialSpacing>
+  <h3 tsCardTitle tsVerticalSpacing>
+    Input: with no validation or hint
+  </h3>
+
+  <ts-input
+    [formControl]="myForm.get('name')"
+    label="No validation or hint padding added"
+    [noValidationOrHint]="true"
+  ></ts-input>
+
+  <ts-input
+    [formControl]="myForm.get('email')"
+    [label]="label2"
+    [noValidationOrHint]="true"
+  ></ts-input>
+</ts-card>
diff --git a/terminus-ui/form-field/src/form-field.component.html b/terminus-ui/form-field/src/form-field.component.html
@@ -1,4 +1,7 @@
-<div class="ts-form-field__wrapper qa-form-field">
+<div
+  class="ts-form-field__wrapper qa-form-field"
+  [ngClass]="{'ts-form-field__with-validation': !noValidationOrHint}"
+  >
   <div
     class="ts-form-field__container qa-form-field-container"
     #containerElement
@@ -61,6 +64,7 @@
     fxLayout="row"
     fxLayoutAlign="space-between center"
     [fxLayoutGap]="flexGap"
+    *ngIf="!noValidationOrHint"
   >
     <div *ngIf="control && (control.ngControl || control.formControl)">
       <ts-validation-messages

diff --git a/terminus-ui/form-field/src/form-field.component.md b/terminus-ui/form-field/src/form-field.component.md
@@ -6,20 +6,88 @@
 **Table of Contents**
 
 - [Basic usage](#basic-usage)
-    - [More...](#more)
+  - [control](#control)
+  - [floatLabel](#floatlabel)
+  - [hideRequiredMarker](#hiderequiredmarker)
+  - [hint](#hint)
+  - [noValidationOrHint](#novalidationorhint)
+  - [validateOnChange](#validateonchange)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 
 ## Basic usage
 
-Use the thing...
+`TsFormFieldComponent` is a component used to wrap several other components that could be used within a form and apply common styles. 
 
 ```html
-<ts-form-field>
-</ts-form-field>
+<ts-form-field
+    [control]="myControlInstance"
+    floatLabel="always"
+    [hideRequiredMarker]="true"
+    hint="My hint"
+    id="my-id"
+    theme="primary"
+    [validateOnChange]="true"
+ ></ts-form-field>
 ```
 
-#### More...
+### control
 
-TODO
+Users can pass in form control to form field component
+
+```html
+<ts-form-field
+    [control]="myFormControl"
+></ts-form-field>
+```
+
+### floatLabel
+
+It defines whether the label should always float or float as the user types. The value can only be set to either `always` or `auto`.
+
+```html
+<ts-form-field
+    [floatLabel]="always"
+></ts-form-field>
+```
+
+### hideRequiredMarker
+
+It defines if a required marker should be hidden.
+
+```html
+<ts-form-field
+    [hideRequiredMarker]="true"
+></ts-form-field>
+```
+
+### hint
+
+It defines a hint for the input.
+
+```html
+<ts-form-field
+    [hint]="Please input a number"
+></ts-form-field>
+```
+
+### noValidationOrHint
+
+A flag to define whether this form needs validation or hint. If it needs validation or hint, a padding bottom is added for validation message or hint, otherwise, no padding at the bottom.
+
+```html
+<ts-form-field
+    [noValidationOrHint]="true"
+></ts-form-field>
+```
+
+### validateOnChange
+
+It defines if validation messages should be shown immediately or on blur
+
+```html
+<ts-form-field
+    [validateOnChange]="true"
+></ts-form-field>
+```
diff --git a/terminus-ui/form-field/src/form-field.component.scss b/terminus-ui/form-field/src/form-field.component.scss
@@ -345,10 +345,13 @@
     // margin to the bottom.
     $wrapper-margin: var(--formField-outline-labelOverlap) 0;
     margin: $wrapper-margin;
-    padding-bottom: var(--formField-wrapper-paddingBottom);
     position: relative;
     // To avoid problems with text-align.
     text-align: left;
+    // Add padding to the bottom only if there is validation needed.
+    &.ts-form-field__with-validation {
+      padding-bottom: var(--formField-wrapper-paddingBottom);
+    }
   }
 }