ตัวตรวจสอบที่คาดไว้จะส่งคืน Promise หรือ Observable

ฉันกำลังพยายามทำการตรวจสอบความถูกต้องแบบกำหนดเองใน Angular 5 แต่ฉันพบข้อผิดพลาดต่อไปนี้

Expected validator to return Promise or Observable

ฉันแค่ต้องการส่งคืนข้อผิดพลาดไปยังแบบฟอร์มหากค่าไม่ตรงกับที่ต้องการนี่คือรหัสของฉัน:

นี่คือส่วนประกอบที่เป็นแบบฟอร์มของฉัน

  constructor(fb: FormBuilder, private cadastroService:CadastroService) {
    this.signUp = fb.group({
      "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
      "email": ["", Validators.compose([Validators.required, Validators.email])],
      "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
      "cpf": ["", Validators.required, ValidateCpf]
    })     
   }

รหัสนี้อยู่ในไฟล์ที่มีการตรวจสอบความถูกต้องที่ฉันต้องการใช้:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

ใครสามารถช่วยฉัน? การตรวจสอบความถูกต้องประเภทนั้นใช้ได้เฉพาะกับสิ่งที่สังเกตได้หรือฉันสามารถทำได้โดยไม่ต้องเป็นสัญญาหรือสังเกตได้? ขอบคุณ

หมายความว่าคุณต้องเพิ่ม Validator หลายตัวในอาร์เรย์

. ตัวอย่าง:

มีข้อผิดพลาด

profileFormGroup = {
  budget: [null, Validators.required, Validators.min(1)]
};

ด้านบนแสดงข้อผิดพลาดที่เครื่องมือตรวจสอบจะส่งคืน Promise หรือ Observable

แก้ไข:

profileFormGroup = {
  budget: [null, [Validators.required, Validators.min(1)]]
};

คำอธิบาย:

ในการตรวจสอบความถูกต้องของรูปแบบปฏิกิริยาเชิงมุมทำได้โดยใช้ตัวตรวจสอบความถูกต้องในตัวซึ่งสามารถกำหนดให้ในอาร์เรย์ในตำแหน่งที่ 2 เมื่อใช้ตัวตรวจสอบความถูกต้องหลายตัว

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

สิ่งต่อไปนี้ควรใช้งานได้:

  "cpf": ["", [Validators.required, ValidateCpf]]

อาร์กิวเมนต์ที่ตัวควบคุมฟอร์มคาดหวังมีดังต่อไปนี้:

constructor(formState: any = null, 
            validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
            asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)

จากhttps://angular.io/api/forms/FormControl

ไม่เกี่ยวข้องโดยตรงกับคำถามของ OP แต่ฉันได้รับข้อผิดพลาดเดียวกันกับปัญหาที่แตกต่างกันเล็กน้อย ฉันมีโปรแกรมตรวจสอบความถูกต้องของ async แต่ฉันลืมส่งคืน Observable (หรือ Promise) จากมัน

นี่คือโปรแกรมตรวจสอบ async ดั้งเดิมของฉัน

public availableEmail(formControl: FormControl) {
   if(formControl && formControl.value){
     return this.http.get('')
   }
}

สิ่งนี้คือถ้าคำสั่ง if เป็นเท็จ? เราไม่ส่งคืนสิ่งใดเลยและเราได้รับข้อผิดพลาดรันไทม์ ฉันเพิ่มประเภทการส่งคืน (ตรวจสอบให้แน่ใจว่า IDE บ่นหากเราไม่ส่งคืนประเภทที่ถูกต้อง) จากนั้นฉันจะกลับมาof(true)ในกรณีที่ประโยค if ล้มเหลว

นี่คือโปรแกรมตรวจสอบ async ที่อัปเดต

public availableEmail(formControl: FormControl): Observable<any> {
   if(formControl && formControl.value){
     return this.http.get('someUrl');
   }
   return of(true);
}

Validators.compose () ซ้ำซ้อน;

คุณสามารถส่งอาร์เรย์ ปัญหาของ OP เกิดจากความล้มเหลวในการตัดตัวตรวจสอบความถูกต้องใน [] เพื่อทำให้เป็นอาร์เรย์ดังนั้น minLength () หนึ่งจึงถือว่าเป็น async และข้อความแสดงข้อผิดพลาดที่เป็นผลลัพธ์

ฉันหวังว่าโซลูชันนี้จะช่วยคุณได้ ขอบคุณ.

ข้อผิดพลาด: userName: ['', [Validators.required, Validators.minLength (3)], ForbiddenNameValidator (/ password /)],

ans: userName: ['', [Validators.required, Validators.minLength (3), ForbiddenNameValidator (/ password /)]],

ตัวตรวจสอบความถูกต้องใช้เฉพาะพารามิเตอร์ที่สองในอาร์เรย์ภายใน ไม่ใช่สำหรับอาร์เรย์ภายนอก

หากคุณเพิ่มตัวตรวจสอบความถูกต้องหลายตัวคุณจะต้องเพิ่มวงเล็บที่สาม '[]' อีกอันและภายในนั้นคุณควรใส่ตัวตรวจสอบความถูกต้องของคุณ ชอบด้านล่าง:

this.yourForm= this.formBuilder.group({
    amount: [null, [Validators.required, Validators.min(1)]],
});

ข้อผิดพลาด: "cpf": ["", Validators.required, ValidateCpf]

แก้ไข: "cpf": ["", [Validators.required, ValidateCpf]]

ฉันคิดว่าเป็นการดีที่จะชี้แจงนอกเหนือจากคำตอบที่ยอมรับว่าข้อผิดพลาดเกิดขึ้นเนื่องจากเมื่อใช้รูปแบบปฏิกิริยาในการสร้าง FormControl หลังจาก initial_value อาร์กิวเมนต์ต่อไปนี้คือตัวตรวจสอบความถูกต้องแบบซิงโครนัสและตัวตรวจสอบความถูกต้อง async ที่จัดกลุ่มในรูปแบบของอาร์เรย์แต่ละรายการ . เช่น:

myFormGroup = this.fb.group({
    myControl: ['', [ mySyncValidators ], [ myAsyncValidators ] ]
})

หากการควบคุมเกิดขึ้นเพียงอย่างใดอย่างหนึ่ง Angular จะยอมรับว่าเป็นองค์ประกอบเดียว เช่น:

myFormGroup = this.fb.group({
    myControl: ['', mySyncValidator, myAsyncValidator ]
})

ดังนั้นเมื่อลืมเกี่ยวกับวงเล็บสำหรับการจัดกลุ่ม Angular ถือว่ารายการ validator ที่สองเป็นส่วนหนึ่งของ Async validators ดังนั้นเราจึงได้รับ Expected validator to return Promise or Observable