Angular响应式表单之FormGroup

创建FormGroup的实例

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {FormGroup,FormBuilder} from "@angular/forms";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {

  fromModel!: FormGroup;

  //使用FormBuilder服务
  constructor(private fb:FormBuilder) {
    this.fromModel=this.fb.group({
      username:[""],
      password:[]
    })
  }

然后关联这个FormGroup到视图中：

<form class="form-signin" [formGroup]="fromModel" (ngSubmit)="onSubmit()">

  <input type="text" id="username" formControlName="username">

  <input type="text" id="password" formControlName="password">

  <button  type="submit">Sign in</button>
</form>

formGroup和formControlName是响应式表单模块提供的指令。当我们用formGroup来管理一组表单控件的时候，使用formControlName将控件和表单绑定是一个很方便的操作

使用FormBuilder服务

我们处理表单的过程中，有时候会遇到很复杂的表单。Angular提供了FormBuilder服务来方便的生成表单控件，使用起来更方便简单

constructor(private loginService:LoginService,private fb:FormBuilder,private router: Router) {
    this.fromModel=this.fb.group({
      username:[""],
      password:[]
    })
  }

重置表单和获取表单的值

重置：

this.registerForm.reset();

获取表单的值：

const value = name.value;

获取姓名值：

const usernamevalues = this.fromModel.value.username;

获取密码值：

const passwordvalues = this.fromModel.value.password;