說明

static min(min: number): ValidatorFn
數字要高於等於 min

static max(max: number): ValidatorFn
數字要低於等於 max

static required(control: AbstractControl): ValidationErrors | null
必填 (空白可以通過)

static requiredTrue(control: AbstractControl): ValidationErrors | null
只有 boolean 的 true 會通過

static email(control: AbstractControl): ValidationErrors | null
一般的 email 驗證

static minLength(minLength: number): ValidatorFn
最少 minLength 個字

static maxLength(maxLength: number): ValidatorFn
最多 maxLength 個字

static pattern(pattern: string | RegExp): ValidatorFn
自訂 RegExp 驗證

static nullValidator(control: AbstractControl): ValidationErrors | null
目前測試 就是都 null，也就是 永遠通過

static compose(validators: ValidatorFn[]): ValidatorFn | null
整合所有需要的驗證進去

static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
把驗證集合起來
等同
abc: new FormControl('', [ Validators.maxLength(5), Validators.required ])

程式碼

app.component.html

<form (ngSubmit)="onSubmit()" [formGroup]="form">
      <div class="form-group">
        <label for="smallName">姓名 - required</label>
        <input id="smallName" class="form-control" formControlName="smallName">
        <div *ngIf="smallName.invalid && (smallName.dirty || smallName.touched)" class="alert alert-danger">
          <div *ngIf="smallName.errors.required">
            請輸入姓名.
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="min">數字要高於等於 - 5</label>
        <input id="min" class="form-control" formControlName="min">
        <div *ngIf="min.invalid && (min.dirty || min.touched)" class="alert alert-danger">
          <div *ngIf="min.errors.min">
            數字請高於等於 5
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="max">數字要低於等於 - 5</label>
        <input id="max" class="form-control" formControlName="max">
        <div *ngIf="max.invalid && (max.dirty || max.touched)" class="alert alert-danger">
          <div *ngIf="max.errors.max">
            數字請低於等於 5
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="requiredTrue">要給布林值 true - requiredTrue</label>
        <input id="requiredTrue1" type="radio" class="form-control" formControlName="requiredTrue" [value]=true>
        <input id="requiredTrue2" type="radio" class="form-control" formControlName="requiredTrue" [value]=false>
        <div *ngIf="requiredTrue.invalid && (requiredTrue.dirty || requiredTrue.touched)" class="alert alert-danger">
          <div *ngIf="requiredTrue.errors.required">
            表單值 要是 boolean true
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="email">信箱 - email</label>
        <input id="email" class="form-control" formControlName="email">
        <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
          <div *ngIf="email.errors.email">
            請輸入email格式
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="minLength">姓名 - 最少五個字</label>
        <input id="minLength" class="form-control" formControlName="minLength">
        <div *ngIf="minLength.invalid && (minLength.dirty || minLength.touched)" class="alert alert-danger">
          <div *ngIf="minLength.errors.minlength">
            請輸入五個字以上.
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="maxLength">姓名 - 最多五個字</label>
        <input id="maxLength" class="form-control" formControlName="maxLength">
        <div *ngIf="maxLength.invalid && (maxLength.dirty || maxLength.touched)" class="alert alert-danger">
          <div *ngIf="maxLength.errors.maxlength">
            請輸入五個字以下.
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="pattern">信箱格式 - pattern</label>
        <input id="pattern" class="form-control" formControlName="pattern" >
        <div *ngIf="pattern.invalid && (pattern.dirty || pattern.touched)" class="alert alert-danger">
          <div *ngIf="pattern.errors.pattern">
            信箱格式錯誤
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="nullValidator">不會錯誤的驗證 - nullValidator</label>
        <input id="nullValidator" class="form-control" formControlName="nullValidator" >
        {{nullValidator.errors | json}}
        <div *ngIf="nullValidator.invalid && (nullValidator.dirty || nullValidator.touched)"
          class="alert alert-danger">
          <div *ngIf="nullValidator.errors.required">
            你看不到nullValidator.
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="compose">多重驗證 - compose</label>
        <input id="compose" class="form-control" formControlName="compose">
              {{compose.errors | json}}
        <div *ngIf="compose.invalid && (compose.dirty || compose.touched)" class="alert alert-danger">
          <div *ngIf="compose.errors">
            多重驗證失敗
          </div>
        </div>
      </div>
      
{{form.value | json}}
</form>

app.component.ts

  defaultName = '羅蘭';

  form = new FormGroup({
    smallName:  new FormControl(this.defaultName, [
      Validators.required,
    ]),
    min: new FormControl(0, [
      Validators.min(5),
    ]),
    max: new FormControl(0, [
      Validators.max(5),
    ]),
    requiredTrue: new FormControl(true, [
      Validators.requiredTrue,
    ]),
    email: new FormControl(this.defaultName, [
      Validators.email,
    ]),
    minLength: new FormControl(this.defaultName, [
      Validators.minLength(5),
    ]),
    maxLength: new FormControl(this.defaultName, [
      Validators.maxLength(5),
    ]),
    pattern: new FormControl(this.defaultName, [
      Validators.pattern('^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z]+$'),
    ]),
    nullValidator: new FormControl(null, [
      Validators.nullValidator,
    ]),
    compose: new FormControl(this.defaultName,
      Validators.compose([Validators.required, Validators.minLength(5), Validators.email]),
    ),
  });

  get smallName() { return this.form.get('smallName'); }

  get min() { return this.form.get('min'); }

  get max() { return this.form.get('max'); }

  get requiredTrue() { return this.form.get('requiredTrue'); }

  get email() { return this.form.get('email'); }

  get minLength() { return this.form.get('minLength'); }

  get maxLength() { return this.form.get('maxLength'); }

  get pattern() { return this.form.get('pattern'); }

  get nullValidator() { return this.form.get('nullValidator'); }

  get compose() { return this.form.get('compose'); }