美文网首页Angular2
Angular 异步校验

Angular 异步校验

作者: YLPeach | 来源:发表于2019-06-17 16:50 被阅读0次

不要在调用验证方法时保存数据

  • 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()
    );
  };
}

相关文章

  • Angular 异步校验

    不要在调用验证方法时保存数据 this.formData.controls[i].markAsDirty(); t...

  • 表单校验——校验响应式表单

    表单校验 Angular的校验器 angular提供了一组预定义的校验器,这些校验器都是定义在angular的fo...

  • angular form validation 使用

    angular只能对form进行校验, 如果你想只对某些input元素进行校验, 可以使用ng-form指令. 以...

  • angular表单校验

    最近在写项目的时候,产品要求对表单的必填输入项进行友好的校验提示,效果如图: " 这个需求很简单,怎么实现我不管。...

  • 5表单校验上

    test() 方法用于检测一个字符串是否匹配某个模式.目标Angular的校验器:普通的方法校验响应式表单校验模板...

  • 15.《Angular表单校验》

    一、使用Angular自带的表单校验器 运行结果: 二、自定义表单校验器 当然我们也可以将验证器方法独立出来 使用...

  • Angular6-模型驱动表单

    Angular中FormArray写法模板: html中 ts文件 那么怎么做字段校验呢 ts文件

  • HTML5技术分享angular开发应用实现

    组件异步路由 angular实现 在开发Angular2应用时,像组件设计、路由设计以外,对于一个较大型的应用,我...

  • HTML5技术分享angular开发应用实现

    组件异步路由 angular实现 在开发Angular2应用时,像组件设计、路由设计以外,对于一个较大型的应用,我...

  • angular异步发送请求

网友评论

    本文标题:Angular 异步校验

    本文链接:https://www.haomeiwen.com/subject/jwqzfctx.html