Angular 2中的条件验证

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

@Component({
  selector: 'app-conditional-validation',
  template: `
    <form [formGroup]="form">
      <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 *ngIf="form.get('username').errors?.minlength">
          Username must be at least 3 characters long.
        </div>
      </div>
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  `
})
export class ConditionalValidationComponent {
  form: FormGroup;

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

this.form.get('username').markAsTouched();
this.form.get('username').markAsDirty();