angular登录按钮输入框监听

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

效果图:

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

javascript 复制代码

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

javascript 复制代码

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:

xml 复制代码

<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