响应式表单

reactiveform HTM:L

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

reactive TS

import { Component, OnInit } from '@angular/core';
import {FormArray, FormControl, FormGroup, FormGroupName} from '@angular/forms';

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

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

  constructor() { }

  ngOnInit(): void {
  }

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

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