(十六)、Angular4.0 响应式表单

向右看齐 2022-05-28 11:18 203阅读 0赞

**一、在demo4项目中新建reactiveForm组件**

ng g component reactiveForm

**二、3种api**

// FromControl 相当于一个普通对象
      username: FormControl = new FormControl('aaa');
    
      // FormGroup 存放key:value形式的数据
      formModel: FormGroup = new FormGroup({
        from: new FormControl(),
        to: new FormControl()
      });
    
      // FormArray 相当于数组
      emails: FormArray = new FormArray([
        new FormControl('a@a.com'),
        new FormControl('b@b.com'),
      ]);

**三、reactive-form.component.ts**

*  定义一个FormGroup(java中的Map)，用来接收表单的所有数据

formModel: FormGroup = new FormGroup({
        dateRange: new FormGroup({
          from: new FormControl(),
          to: new FormControl()
        }),
        emails: new FormArray([
          new FormControl('a@a.com'),
          new FormControl('b@b.com')
        ])
      });

*  addEmail()往数组里面添加一个空的FormControl

addEmail() {
        const emails = this.formModel.get('emails') as FormArray;
        emails.push(new FormControl());
      }

*  onSubmit()提交表单触发的方法，把表单数据打印到控制台

onSubmit() {
        console.log(this.formModel.value);
      }

**四、reactive-form.component.html (对应reactive-form.component.ts自行参悟)**

*  用到了formGroupName、formConrolName、formArrayName关键字，相当于数据的双向绑定，对应绑定FormGroup、FormControl、FormArray

<form [formGroup]="formModel" (submit)="onSubmit()">
      <div formGroupName="dateRange">
        起始日期:<input type="date" formGroupName="from">
        截止日期:<input type="date" formGroupName="to">
      </div>
      <div>
        <ul formArrayName="emails">
          <li *ngFor="let e of formModel.get('emails').controls; let i = index;">
            <input type="text" [formControlName]="i">
          </li>
        </ul>
        <button type="button" (click)="addEmail()">增加Email</button>
      </div>
      <div>
        <button type="submit">保存</button>
      </div>
    </form>

**五、app.component.html中使用reactiveForm组件**

<app-reactive-form></app-reactive-form>

**六、启动项目，访问测试localhost:4200 **

**七、表单重构**

**八、新建reactiveRegist组件**

ng g component reactiveRegist

**九、reactive-regist.component.ts中编写表单注册的数据结构**

formModel: FormGroup;
    
      constructor() {
        this.formModel = new FormGroup({
          username: new FormControl(),
          mobile  : new FormControl(),
          passwordsGroup: new FormGroup({
            password: new FormControl(),
            pConfirm: new FormControl()
          })
        });
      }
    
      onSubmit() {
        console.log(this.formModel.value);
      }

**十、reactive-regist.component.html**

**十一、template-form.component.html展示reactive-regist组件，启动项目，访问测试localhost:4200 **

**十二、用FormBuilder来简化reactive-regist.component.ts中的数据结构**

*  fb.group(\{\})替代new FormGroup，并且可以额外传多一个参数fb.group(\{\},校验group)
 *  \['',校验control,异步校验control\] 替代new FormControl

constructor(fb: FormBuilder) {
        this.formModel = fb.group({
          username: [''],
          mobile  : [''],
          passwordsGroup: fb.group({
            password: [''],
            pConfirm: ['']
          })
        });
      }

**十三、启动项目，访问测试localhost:4200 **