成都旅游攻略五日游大概费用_岳阳新闻网_百度引擎搜索入口_优化的意思

说明:登录 login+dialog
效果图：

step1:

import { Component } from '@angular/core';
import {FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { AlertDialogComponent } from './alert-dialog.component';
import {NgIf} from '@angular/common';@Component({selector: 'app-login',templateUrl: './login.component.html',imports: [FormsModule,NgIf,ReactiveFormsModule],styleUrls: ['./login.component.css']
})
export class LoginComponent {loginForm = new FormGroup({username: new FormControl('', [Validators.required,Validators.minLength(3)]),password: new FormControl('', [Validators.required,Validators.minLength(6)])});constructor(private dialog: MatDialog) {}get username() { return this.loginForm.get('username'); }get password() { return this.loginForm.get('password'); }onSubmit() {if (this.loginForm.invalid) return;const { username, password } = this.loginForm.value;if (username === 'admin' && password === '123456') {this.showAlert('登录成功', 'success');this.loginForm.reset();} else {this.showAlert('用户名或密码错误', 'error');}}private showAlert(message: string, type: 'success' | 'error') {this.dialog.open(AlertDialogComponent, {data: { message, type },width: '300px'});}
}

step2:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form"><h2>用户登录</h2><div class="form-group"><label for="username">用户名</label><inputtype="text"id="username"formControlName="username"placeholder="至少3个字符"[class.invalid]="username?.invalid"><div class="error-message" *ngIf="username?.errors?.['required'] && username?.touched">用户名不能为空</div><div class="error-message" *ngIf="username?.errors?.['minlength'] && username?.touched">用户名至少3个字符</div></div><div class="form-group"><label for="password">密码</label><inputtype="password"id="password"formControlName="password"placeholder="至少6位密码"[class.invalid]="password?.invalid"><div class="error-message" *ngIf="password?.errors?.['required'] && password?.touched">密码不能为空</div><div class="error-message" *ngIf="password?.errors?.['minlength'] && password?.touched">密码至少6个字符</div></div><buttontype="submit"class="submit-btn"[disabled]="loginForm.invalid">立即登录</button>
</form>

step3:

.login-form {max-width: 300px;margin: 0 auto;padding: 20px;
}.form-group {margin-bottom: 15px;
}.form-group label {display: block;margin-bottom: 5px;
}.form-group input {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;
}.form-group input.invalid {border-color: #dc3545;
}.error-message {color: #dc3545;font-size: 0.875rem;margin-top: 4px;
}.submit-btn {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}.submit-btn:hover {background-color: #0056b3;
}

step4:

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { NgClass } from '@angular/common';
import {MatButton} from "@angular/material/button";@Component({selector: 'app-alert-dialog',standalone: true,imports: [MatDialogModule, NgClass, MatButton],templateUrl: './alert-dialog.component.html',styleUrls: ['./alert-dialog.component.css']
})
export class AlertDialogComponent {constructor(@Inject(MAT_DIALOG_DATA) public data: { message: string; type: 'success' | 'error' },public dialogRef: MatDialogRef<AlertDialogComponent>) {}
}

step5:

<div class="alert-dialog" [ngClass]="data.type"><div class="alert-content"><h3 class="alert-title"><span class="alert-icon">  {{ data.type === 'success' ? '✅' : '❌' }} {{ data.message }} </span></h3><div class="action-buttons"><button mat-button class="alert-action" (click)="dialogRef.close()">确定</button></div></div>
</div>

step6:

.alert-dialog {border-radius: 16px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);padding: 24px;background: #fff;margin: 0 16px;
}.alert-title {margin: 0 0 16px 0;font-size: 18px;font-weight: 600;color: rgba(0, 0, 0, 0.87);
}.alert-icon {margin-right: 8px;font-size: 20px;
}.action-buttons {display: flex;justify-content: flex-end;gap: 8px;
}.alert-action {border-radius: 8px !important;padding: 8px 16px !important;font-size: 14px !important;font-weight: 500 !important;transition: all 0.3s ease;
}.alert-dialog[ng-reflect-ng-class="success"] {background: #e8f5e9;
}.alert-dialog[ng-reflect-ng-class="success"] .alert-title,
.alert-dialog[ng-reflect-ng-class="success"] .alert-action {color: #2e7d32;
}.alert-dialog[ng-reflect-ng-class="error"] {background: #ffebee;
}.alert-dialog[ng-reflect-ng-class="error"] .alert-title,
.alert-dialog[ng-reflect-ng-class="error"] .alert-action {color: #c62828;
}

end