创建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;