angular登录按钮输入框监听

说明：angular实现简单的登录页面，监听输入框的值，打印出来，按钮监听，打印数据

效果图:

step1:E:\projectgood\ajnine\untitled4\src\app\app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';import { routes } from './app.routes';export const appConfig: ApplicationConfig = {providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimations()]
};

step2:E:\projectgood\ajnine\untitled4\src\app\user\user.component.ts

import {Component, OnInit} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {FormsModule} from '@angular/forms';@Component({selector: 'app-user',standalone: true,imports: [MatButtonModule, MatInputModule, FormsModule],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {todos: Todo[] = [];dialogData: Todo = {task: '', description: ''};getClick(name: string) {console.log('you click this button')console.log(name)names = name}getLoginClick(name: string) {console.log(this.dialogData.task, this.dialogData.description)}animal() {return names}protected readonly names = names;ngOnInit(): void {}
}var names = ''interface Todo {task: string;description: string;
}

step3:

<p>欢迎来到登录页!</p>
<button style="background: deepskyblue;color: white" mat-button (click)="getClick('测试数据123')">Basic</button>
<button style="margin-left:50px;background: red;color: white" mat-button (click)="getLoginClick('测试数据456')">登录
</button><li>You chose: <em>{{ animal() }}</em>
</li><mat-form-field><input matInput placeholder="Task" [(ngModel)]="dialogData.task">
</mat-form-field>
<mat-form-field style="margin-left: 50px"><input matInput placeholder="Description" [(ngModel)]="dialogData.description">
</mat-form-field>

end