角度反应式显示

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

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="username" placeholder="Username">
      <div *ngIf="form.get('username').invalid && (form.get('username').dirty || form.get('username').touched)">
        <div *ngIf="form.get('username').errors.required">Username is required.</div>
      </div>
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  `
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      username: ['', Validators.required]
    });
  }

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

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