不要在调用验证方法时保存数据
- this.formData.controls[i].markAsDirty();
- this.formData.controls[i].updateValueAndValidity();
for (const i in this.formData.controls) {
console.log(i, this.formData.controls[i].valid, this.formData.get(i).errors ); // 异步之前 valid 值 等于 true
this.formData.controls[i].markAsDirty();
this.formData.controls[i].updateValueAndValidity();
console.log(i, this.formData.controls[i].valid, this.formData.get(i).errors ); // 异步之后 valid 值 等于 true
}
// 如果你有异步验证,这个this.formData.valid值永远是false
if (!this.formData.valid ) {
this.message.error('数据填写有误!!');
return;
}
自定义异步验证方法
export function nameRepetition(db: DbService): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
// 获取这个 form的值 这里
const value = control.root.value;
return control.valueChanges.pipe(
// 延时防抖
debounceTime(400),
// 异步验证具体请求
switchMap(() => db.repetitionAsync(name, (o: any) => f.id !== value.id && f.name === control.value )),
map(c => {
console.log(c);
return c > 0 ? { reperition: `${control.value} 已存在!!` } : null;
}),
// 每次验证的结果是唯一的,截断流
first()
);
};
}
export function nameRepetition(
db: DbService,
name: string,
f: (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1.name === o2.name && o1.id !== o2.id,
nowkey: string = 'name'): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
const value = control.root.value;
// 这里我要重新赋值,不然拿到的不是最新的值,(我不清楚为什么,有知道留言告诉我谢谢) control.value这个是最新的值,control.root.value的值不是最新的值
// nowkey 就是异步验证字段
value[nowkey] = control.value;
return control.valueChanges.pipe(
// 延时防抖
debounceTime(400),
switchMap(() => db.repetitionAsync(name, (o: any) => f(o, value))),
map(c => {
console.log(c);
return c > 0 ? { reperition: `${control.value} 已存在!!` } : null;
}),
// 每次验证的结果是唯一的,截断流
first()
);
};
}
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。