Merge pull request #253 from db-ui/fix-input-defaultvalue

fix: input default value

Author: annsch

package-lock.json

@@ -22,6 +22,9 @@ export default function DBInput(props: DBInputProps) {
 	const state = useStore<DBInputState>({
 		mId: DEFAULT_ID,
 		_isValid: undefined,
+		_value: '',
+		_placeholder: ' ', // placeholder can't be empty
+		_label: 'LABEL SHOULD BE SET',
 		handleChange: (event) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -30,6 +33,9 @@ export default function DBInput(props: DBInputProps) {
 				props.change(event);
 			}
 
+			// using controlled components for react forces us to using state for value
+			state._value = event.target.value;
+
 			if (textInputRef?.validity?.valid != state._isValid) {
 				state._isValid = textInputRef?.validity?.valid;
 				if (props.validityChange) {
@@ -61,9 +67,22 @@ export default function DBInput(props: DBInputProps) {
 		} else {
 			state.mId = 'input-' + uuid();
 		}
+
+		if (props.value) {
+			state._value = props.value;
+		}
+
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
+
+		if (props.placeholder) {
+			state._placeholder = props.placeholder;
+		}
+
+		if (props.label) {
+			state._label = props.label;
+		}
 	});
 
 	return (
@@ -81,11 +100,11 @@ export default function DBInput(props: DBInputProps) {
 				id={state.mId}
 				name={props.name}
 				type={props.type || 'text'}
-				placeholder={props.placeholder}
+				placeholder={state._placeholder}
 				aria-labelledby={state.mId + '-label'}
 				disabled={props.disabled}
 				required={props.required}
-				value={props.value}
+				value={state._value}
 				maxLength={props.maxLength}
 				minLength={props.minLength}
 				pattern={props.pattern}
@@ -97,7 +116,7 @@ export default function DBInput(props: DBInputProps) {
 				htmlFor={state.mId}
 				aria-hidden="true"
 				id={state.mId + '-label'}>
-				<span>{props.label}</span>
+				<span>{state._label}</span>
 			</label>
 			<Show when={props.description}>
 				<p className="description">{props.description}</p>

packages/components/src/components/input/input.lite.tsx

@@ -228,6 +228,7 @@
 			}
 
 			& ~ .icon-input-state {
+				// TODO replace with svg icon
 				@include icon(glyph(search), 20, "filled", "before", false);
 			}
 

packages/components/src/components/input/input.scss

@@ -54,6 +54,9 @@ export type DBInputProps = DBInputDefaultProps &
 export type DBInputDefaultState = {
 	mId?: string;
 	_isValid: boolean | undefined;
+	_value: any;
+	_placeholder: string;
+	_label: string;
 };
 
 export type DBInputState = DBInputDefaultState &

packages/components/src/components/input/model.ts

@@ -6,12 +6,27 @@ <h1>Angular</h1>
 			<DBButton text="Test" icon="account" (click)="onClick()"></DBButton>
 			<DBIcon icon="account"></DBIcon>
 
-			<section class="db-ui-expressive">
-				<DBInput></DBInput>
-			</section>
+			<form class="db-ui-expressive" (ngSubmit)="onSubmitForm($event)">
+				<DBInput
+					[(ngModel)]="formData.username"
+					name="username"
+					label="Textinput"
+					placeholder="Platzhalter"
+					description="Beschreibung"
+					value="{{ formData.username }}"
+					iconBefore="edit"
+					ngDefaultControl
+				></DBInput>
+				<input
+					[(ngModel)]="formData.password"
+					name="password"
+					value="test"
+				/>
+				<DBButton variant="secondary">Senden</DBButton>
+			</form>
 
 			<section class="db-ui-regular">
-				<DBInput></DBInput>
+				<DBInput label="Label"></DBInput>
 			</section>
 
 			<section class="db-ui-functional">

showcases/angular-current-showcase/src/app/app.component.html

@@ -17,8 +17,19 @@ export class AppComponent {
 		{ name: 'tab-bar-2', label: '2-Tab2', content: 'Content 2-2' }
 	];
 
+	formData = {
+		username: 'Test',
+		password: '1234'
+	};
+
 	onClick() {
 		// eslint-disable-next-line no-console
-		console.log('click button');
+		console.log('click event');
+	}
+
+	onSubmitForm(event: any): void {
+		event.preventDefault();
+		// eslint-disable-next-line no-console
+		console.log('on submit Form', this.formData);
 	}
 }

showcases/angular-current-showcase/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import {
@@ -18,7 +19,8 @@ import { AppComponent } from './app.component';
 		DBIconModule,
 		DBDividerModule,
 		DBCardModule,
-		DBInputModule
+		DBInputModule,
+		FormsModule
 	],
 	providers: [],
 	schemas: [NO_ERRORS_SCHEMA],

showcases/angular-current-showcase/src/app/app.module.ts

@@ -15,6 +15,12 @@ const App = () => {
 		console.log('click event test');
 	};
 
+	const onSubmit = (event: any) => {
+		event.preventDefault();
+		// eslint-disable-next-line no-console
+		console.log('Submit Form', event);
+	};
+
 	return (
 		<DBPage
 			type="fixedHeaderFooter"
@@ -57,14 +63,15 @@ const App = () => {
 						gap: '1rem',
 						margin: '1rem 0'
 					}}>
-					<section className="db-ui-expressive">
+					<form className="db-ui-expressive" onSubmit={onSubmit}>
 						<DBInput
 							description="Das ist die Beschreibung"
 							label="Startbahnhof eingeben"
 							placeholder="irgendein Text"
 							iconBefore="edit"
 							variant="error"
 							value="hello"
+							name="testInput"
 						/>
 
 						<DBInput
@@ -83,7 +90,8 @@ const App = () => {
 							type="datetime-local"
 							id="input-expr-date"
 						/>
-					</section>
+						<DBButton variant="secondary">Test</DBButton>
+					</form>
 
 					<section className="db-ui-regular">
 						<DBInput