quentin_duwa/qd-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

input password

Browse Source
This commit is contained in:
MastersGame
2026-04-06 11:25:11 +02:00
parent 7aaa675875
commit 83c959a349
8 changed files with 702 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
projects/qd-design-demo/src/app/app.html
View File

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

7
projects/qd-design-demo/src/app/app.ts
View File

@@ -2,6 +2,7 @@ import {Component, signal} from '@angular/core';
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 {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';
@@ -10,18 +11,19 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@Component({
selector: 'app-root',
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective, QdInputText, FormField, FormsModule, ReactiveFormsModule],
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective, QdInputText, QdInputPassword, 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: ''});
loginModel = signal({checkEmail: true, email: '', password: ''});
loginForm = form(this.loginModel, (schemaPath) => {
required(schemaPath.email, {message: 'Email is required'});
email(schemaPath.email, {message: 'Enter a valid email address'});
disabled(schemaPath.email, ({valueOf}) => valueOf(schemaPath.checkEmail))
required(schemaPath.password, {message: 'Password is required'});
});
public onClick() {
@@ -31,5 +33,6 @@ export class App {
public confirmForm() {
console.log(this.loginModel().email);
console.log(this.loginModel().checkEmail);
console.log(this.loginModel().password);
}
}