美文网首页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 异步校验

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