html（模板）部分 ============================================================================

<form nz-form [formGroup]="addNodeForm"><input nz-input [formControlName]="'nName'" [(ngModel)]="nName" placeholder="请输入节点名称"><div class="error-warning" *ngIf="addNodeForm.get('nName').invalid && (addNodeForm.get('nName').dirty || addNodeForm.get('nName').touched)" ><div [hidden]="!addNodeForm.hasError('required','nName')">请填写节点名称</div></div>
</form>

注意：

1、需要验证的单元一定要加个 [formControlName]="'nName'" ， 

     [(ngModel)]="nName"可以不用，在组件里获取方式是： this.addNodeForm.controls['nName'].value;

2、注意这里错误信息是否显示的判断方式：

     *ngIf="addNodeForm.get('nName').invalid && (addNodeForm.get('nName').dirty || addNodeForm.get('nName').touched)"

    .invalid表示 nName 验证不通过

     .dirty .touched是要nName 表单触发过才验证

3、<div [hidden]="!addNodeForm.hasError('required','nName')">请填写节点名称</div>  表示字段为空时显示的提示

 

组件部分============================================================================

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";....export class myComponent implements OnInit {constructor(public fb: FormBuilder) {}public addNodeForm:FormGroup;ngOnInit() {const self = this;self.addNodeForm = self.fb.group({nName:['',[Validators.required]],});}...
}

注意：

self.addNodeForm = self.fb.group({nName:['',[Validators.required]],});

验证的字段和规则都写在这里，这里只是验证了非空，你还可以验证字符长度，正则等等；

直接在nName:['',[Validators.required , ... , ...]]这样加就行了

 

最后：

1、提供下重置验证的方式：

this.addNodeForm.reset();

2、主动取消一个单元的验证： 

this.addNodeForm.get('nName').clearValidators();
this.addNodeForm.get('nName').markAsPristine();

      主动添加一个单元的验证：

this.addDataForm.get('nName').setValidators(Validators.required);
this.addDataForm.get('nName').markAsDirty();

3、提交表单的时候，做一次验证的封装方法：

// 表单验证public validate(_validateForm) {for (const i in _validateForm.controls) {_validateForm.controls[ i ].markAsDirty();_validateForm.controls[ i ].updateValueAndValidity();}if (!_validateForm.valid) {return false;}return true;}