angular 5 自定义表单验证

本文参考地址：链接

第三方UI组件：Ant-Design

近期在做angular的表单，目前项目上已经升级到angular 5了，需要做一些自定义表单验证，用户输入的是在服务器上的绝对路径，所以要验证是否是以“/”开头

表单验证 (Validator) 的本质上是一个function，感觉跟pipe 思路类似

html:

<form nz-form [formGroup]="configForm" (ngSubmit)="submitConfig()" (ngReset)="resetConfig()">
    <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
              <label nz-form-item-required>数据存储目录</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="12" nzHasFeedback>
              <nz-input formControlName="NODE_PATH" [nzPlaceHolder]="'存储路径'" [nzSize]="'large'">
                <ng-template #addOnBefore>{{ filePathPrefix }}</ng-template>
              </nz-input>
              <div nz-form-explain *ngIf="validateCorrect('NODE_PATH')">
                只支持一个目录，比如：/home/temp/data
              </div>
              <div nz-form-explain *ngIf="validateError('NODE_PATH')">
                存储目录不可为空
              </div>
              <div nz-form-explain *ngIf="getFormControl('NODE_PATH').hasError('invalidPath')">
                绝对路径必须要以“/”开头
              </div>
            </div>
    </div>
</form>

typescript:

export class ConfigComponent implements OnInit {

  configForm : FormGroup;
  filePathPrefix = 'file://';

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.configForm = this.fb.group({
      NODE_PATH: [null, Validators.required, ConfigComponent.validateFilePath]
    });
  
  }

  static validateFilePath(control: FormControl) {
    let filePath = control.value;
    return Observable.of(filePath && filePath.startsWith('/')).map(result => {
      return !!result ? null : { invalidPath: true };
    });
  }


  /**
   * 提交配置信息
   */
  submitConfig() {
    
  }

  /**
   * 重新配置信息
   */
  resetConfig() {
    
  }

  getFormControl(name) {
    return this.configForm.controls[name];
  }

}

validators 必须要返回一个Observable 对象，因为是异步验证

当用户输入是以“/”开头时，返回null，表示验证通过

当用户输入没有以“/”开头时，返回一个对象，表示验证失败，返回对象可以自定义，比如这里就返回了一个对象 { invalidPath: true } ，这样的话就可以在html 里使用hasError('invalidPath') 来取值了

这样写其实html 冗余代码比较多，可以把各种提示信息再封装一下，让html 更加简洁，可读性更强

转载于:https://my.oschina.net/u/2499632/blog/1601235