angular6表单验证，简单实例

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

    
    

        
请填写节点名称
    

注意：

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、

请填写节点名称

  表示字段为空时显示的提示

 

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

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;
    }