本文参考地址：链接

第三方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 更加简洁，可读性更强