angular响应式表单使用

解析

响应式表单是同步的
模板驱动是异步的

angular响应式表单使用

ReactiveFormsModule

1. 引入文件到模块: {ReactiveFormsModule }

这里导入文件为：app.module.ts

import {  ReactiveFormsModule } from '@angular/forms'
declarations: [
    ReactiveFormsModule
  ],

2. html

<form [formGroup]="myGroup" (ngSubmit)="onSubmit()">
        <input type="text" name="name" formControlName="name">
        <input type="text" name="pwd" formControlName="pwd">
        <button type="submit" >提交</button>
    </form>

3. ts文件 引入{ FormGroup,FormControl, Validators }

import { FormGroup,FormControl, Validators } from '@angular/forms'

①
public myGroup = new FormGroup({
        name: new FormControl(null,[
            Validators.required,
            Validators.minLength(4)
        ]),
        pwd: new FormControl(null,[
            Validators.required,
            Validators.minLength(2)
        ])
      });

②
onSubmit():void{
        // this.myGroup.reset()   // 重置
        console.log(this.myGroup.valid)
        console.log(this.myGroup.value)
    }