angular 表单控件组

使用Angular创建表单组件

最新推荐文章于 2024-05-13 09:39:25 发布

原创最新推荐文章于 2024-05-13 09:39:25 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #typescript

angular 专栏收录该内容

24 篇文章

订阅专栏

这篇博客展示了如何在Angular应用中创建一个简单的登录表单组件。通过`FormGroup`和`FormControl`来管理表单字段，实现用户输入的账号和密码的验证。在提交按钮点击时，会触发`submit()`方法，打印表单数据到控制台。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
    <form [formGroup]="loginForm">
      账号: <input type="text" formControlName="username"  /> <br>
      密码: <input type="text" formControlName="password" /> <br>
      <button (click)="submit()">提交</button>
    </form>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  
  loginForm: FormGroup = new FormGroup({
    username: new FormControl(),
    password: new FormControl(),
  });

  submit(){
    debugger
    console.log(this.loginForm)
  }
}