在angular 6中使用用户输入的动态反应式表单

import { ReactiveFormsModule } from '@angular/forms';

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.dynamicForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      age: ['', Validators.required]
    });
  }
}

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="dynamicForm.get('name').invalid && dynamicForm.get('name').touched">
      <div *ngIf="dynamicForm.get('name').errors.required">Name is required.</div>
    </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="dynamicForm.get('email').invalid && dynamicForm.get('email').touched">
      <div *ngIf="dynamicForm.get('email').errors.required">Email is required.</div>
      <div *ngIf="dynamicForm.get('email').errors.email">Invalid email format.</div>
    </div>
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="number" id="age" formControlName="age">
    <div *ngIf="dynamicForm.get('age').invalid && dynamicForm.get('age').touched">
      <div *ngIf="dynamicForm.get('age').errors.required">Age is required.</div>
    </div>
  </div>
  <button type="submit" [disabled]="dynamicForm.invalid">Submit</button>
</form>

onSubmit() {
  if (this.dynamicForm.valid) {
    console.log(this.dynamicForm.value);
  }
}