Angular6-表单校验-脏校验

老规矩上图

构造表单

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {encryptedDES} from '../../tools/nb-fn.utils';
import {NbMessageService} from '../../services/message/nb-message-service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  validateForm: FormGroup;

  constructor(private fb: FormBuilder,
              private msg: NbMessageService) {
  }

  ngOnInit() {
    this.validateForm = this.fb.group({
      username: [null, [Validators.required]],
      password: [null, [Validators.required]],
      remember: [true]
    });
  }

  login() {
    if (!this.validateForm.valid) {
      this.msg.showErrorMessage('请完善信息');
      this.openDirtyControl(this.validateForm);
      return;
    }
  }

  // 打开脏检验
  openDirtyControl(data) {
    for (const i in data.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
  }

  // 关闭脏校验
  closeDirtyControl(data) {
    for (const i in data.controls) {
      this.validateForm.controls[i].clearValidators();
      this.validateForm.controls[i].updateValueAndValidity();
    }
  }

}

业务场景：

校验不通过时打开脏校验，给用户鲜明提示。