input file

projects/qd-design-demo/src/app/app.html

@@ -80,6 +80,7 @@
     <input class="checkbox" type="checkbox" [formField]="loginForm.checkEmail"/>
     <qd-input-text [formField]="loginForm.email"/>
     <qd-input-password [formField]="loginForm.password"/>
+    <qd-input-file [formField]="loginForm.file"/>
     <qd-button variant="filled" [text]="'Confirm'" [iconName]="'checkmark'" [type]="'submit'" [disabled]="loginForm().invalid()"></qd-button>
   </form>
 </div>

projects/qd-design-demo/src/app/app.ts

@@ -3,6 +3,7 @@ import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
 import {QdIconButton}  from '../../../qd-design/src/lib/qd-icon-button/qd-icon-button';
 import {QdInputText}  from '../../../qd-design/src/lib/qd-input-text/qd-input-text';
 import {QdInputPassword}  from '../../../qd-design/src/lib/qd-input-password/qd-input-password';
+import {QdInputFile}  from '../../../qd-design/src/lib/qd-input-file/qd-input-file';
 import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
 import {NgOptimizedImage} from '@angular/common';
 import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive';
@@ -11,14 +12,26 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-root',
-  imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective, QdInputText, QdInputPassword, FormField, FormsModule, ReactiveFormsModule],
+  imports: [
+    QdButton,
+    QdIconButton,
+    QdCard,
+    NgOptimizedImage,
+    QdTooltipDirective,
+    QdInputText,
+    QdInputPassword,
+    QdInputFile,
+    FormField,
+    FormsModule,
+    ReactiveFormsModule
+  ],
   templateUrl: './app.html',
   standalone: true,
   styleUrl: './app.scss'
 })
 export class App {
   protected readonly title = signal('qd-design-demo');
-  loginModel = signal({checkEmail: true, email: '', password: ''});
+  loginModel = signal({checkEmail: true, email: '', password: '', file: new File([], "", undefined)});
   loginForm = form(this.loginModel, (schemaPath) => {
       required(schemaPath.email, {message: 'Email is required'});
       email(schemaPath.email, {message: 'Enter a valid email address'});
@@ -34,5 +47,6 @@ export class App {
     console.log(this.loginModel().email);
     console.log(this.loginModel().checkEmail);
     console.log(this.loginModel().password);
+    console.log(this.loginModel().file.bytes());
   }
 }