Cách triển khai Trình xác thực không đồng bộ hóa tùy chỉnh trong Angular2/4/5

Question

1. Thậm chí có được hỗ trợ bởi Angular chưa? thấy this mở vấn đề

2. Nếu có, sau đó những gì là sai trong các mã dưới đây

export class someClass{ 

    myForm:ControlGroup; 

    constructor(public http:Http, public formBuilder:FormBuilder) 
     this.myForm = formBuilder.group({ 
      ImageId: ["", Validators.required, this.asynValidator] 
    }); 

    asyncValidator(control: Control): {[key: string]: any} { 

     return new Promise (resolve => { 

      let headers = new Headers(); 
      headers.append('Content-Type', 'application/json'); 

      this.http.get('http://localhost/ImageIdValidate?id='+ control.value, {headers:headers}) 
       .map(res => res.json()) 
       .subscribe(data => { 
        console.log(data); 
        if(data != null) { 
         resolve({"duplicate": true}) 
        } 
        else resolve(null);  
       }) 
      }); 
     }); 
     } 
    } 

Nó thậm chí không thực hiện một yêu cầu máy chủ.

Answer 1

Bạn cần phải ràng buộc phương pháp của bạn trên ví dụ thành phần chính nó như mô tả dưới đây:

this.myForm = formBuilder.group({ 
      ImageId: ["",  
       Validators.required, 
       this.asynValidator.bind(this)] 
    }); 

Nếu không, bạn sẽ không thể sử dụng thuộc tính http để thực hiện yêu cầu của bạn.

Bài viết này cũng có thể cung cấp cho bạn một số gợi ý về hình thức xác nhận không đồng bộ (xem phần "xác nhận không đồng bộ"):

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Answer 2

Hello guys nhờ cho các giải pháp. Tuy nhiên nó không làm việc cho tôi ra khỏi hộp.

vấn đề là trình xác thực async phải là tham số tiếp theo như một phần của trình xác thực. vì vậy, những gì hiệu quả đối với tôi là

this.myForm = formBuilder.group({ 
     ImageId: ["",  
      [Validators.required], 
      [this.asynValidator.bind(this)]] 
}); 

và tadaa !! cơn đau đầu đã biến mất. hy vọng nó sẽ giúp ai đó.

Answer 3

như các phiên bản mới hơn của góc, nhưng phiên bản trước 5.0.0 bạn sẽ thêm các validator async như là đối số thứ ba cho formcontrol của bạn:

myControl: ['', [Validators.required], [this.asyncValidator.bind(this)]] 

kể từ phiên bản 5.0.0 bây giờ bạn có thể đánh dấu sự xác nhận như vậy:

myControl: ['', {validators: [Validators.required], 
       asyncValidators:[this.asyncValidator.bind(this)]}]