Merge pull request #424 from youda97/invalid-number

Add invalid field for number input and store value when inputted

Author: zvonimirfras

src/number-input/number.component.ts

@@ -33,6 +33,7 @@ export class NumberChange {
 		<label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label>
 		<div
 			data-numberinput
+			[attr.data-invalid]="(invalid ? '' : null)"
 			class="bx--number"
 			[ngClass]="{
 				'bx--number--light': theme === 'light',
@@ -48,7 +49,8 @@ export class NumberChange {
 				[min]="min"
 				[max]="max"
 				[disabled]="disabled"
-				[required]="required"/>
+				[required]="required"
+				(input)="onNumberInputChange($event)"/>
 			<div *ngIf="!skeleton" class="bx--number__controls">
 				<button
 					class="bx--number__control-btn up-icon"
@@ -65,6 +67,9 @@ export class NumberChange {
 					</svg>
 				</button>
 			</div>
+			<div *ngIf="invalid" class="bx--form-requirement">
+				{{invalidText}}
+			</div>
 			<div *ngIf="helperText" class="bx--form__helper-text">{{helperText}}</div>
 		</div>
 	`,
@@ -96,6 +101,10 @@ export class Number implements ControlValueAccessor {
 	 * Set to `true` for a loading number component.
 	 */
 	@Input() skeleton = false;
+	/**
+	 * Set to `true` for an invalid number component.
+	 */
+	@Input() invalid = false;
 	/**
 	 * The unique id for the number component.
 	 */
@@ -124,6 +133,10 @@ export class Number implements ControlValueAccessor {
 	 * Sets the optional helper text.
 	 */
 	@Input() helperText;
+	/**
+	 * Sets the invalid text.
+	 */
+	@Input() invalidText;
 	/**
 	 * Emits event notifying other classes when a change in state occurs in the input.
 	 */
@@ -205,4 +218,8 @@ export class Number implements ControlValueAccessor {
 		this.propagateChange(this.value);
 	}
 
+	onNumberInputChange(event) {
+		this.value = event.target.value;
+		this.emitChangeEvent();
+	}
 }

src/number-input/number.stories.ts

@@ -17,15 +17,19 @@ storiesOf("Number", module).addDecorator(
 				[theme]="theme"
 				[min]="min"
 				[max]="max"
+				[invalid]="invalid"
+				[invalidText]="invalidText"
 				[disabled]="disabled">
 			</ibm-number>
 		`,
 		props: {
 			label: text("label", "Number Input Label"),
 			helperText: text("helper text", "Optional helper text here"),
+			invalidText: text("Form validation content", "Invalid number"),
 			theme: select("theme", ["dark", "light"], "dark"),
 			min: number("min", 0),
 			max: number("max", 100),
+			invalid: boolean("Show form validation", false),
 			disabled: boolean("disabled", false)
 		}
 	}))