1、案例需求

表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能

2、名词解释

在分析代码之前,首先明确 FormControl、formControl、formControlName、FormGroup、formGroup、formGroupName、FormArray、formArray、formArrayName 都是什么意思以及它们的用法。

2.1、FormControl

  • FormControl:跟踪独立表单控件的值和验证状态。它和 FormGroup 和 FormArray 是 Angular 表单的三大基本构造块之一。它扩展了 AbstractControl 类,并实现了关于访问值、验证状态、用户交互和事件的大部分基本功能。

当使用响应式表单时,FormControl 类是最基本的构造块。要注册单个的表单控件,在组件中导入 FormControl 类,并创建一个 FormControl 的新实例,把它保存在类的某个属性中。

export class AppComponent implements OnInit {
    const control = new FormControl('', Validators.required);
    console.log(control.value);      // ''
    console.log(control.status);     // 'INVALID'
}

在组件类中创建了控件之后,还要把它和模板中的一个表单控件关联起来,为表单控件添加 formControl 绑定。

<label>
  Name:
  <input type="text" [formControl]="name">
label>
  • formControl:是一个输入指令,接受 FormControl 的实例,在模版中使用。
  • formControlName: 也是输入指令,但是它接受的是一个字符串,同 formGroup 指令配合使用。