angular 表单控件组

李卓书

于 2022-05-10 10:53:46 发布

阅读量372

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： javascript typescript

本文链接：https://blog.youkuaiyun.com/wangbiao9292/article/details/124683279

angular 专栏收录该内容

24 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
  }
}