Góc 2 - Ngoại lệ: _this.subscribe không phải là chức năng - Xác thực tùy chỉnh

Question

Tôi đang cố triển khai quy tắc xác thực tùy chỉnh để xác thực xem hộp kiểm có được chọn hay không.

Nhưng tôi nhận được một error_handler.js:46 EXCEPTION: _this.subscribe is not a function khi tôi cố gắng thêm các validator tùy chỉnh

validator.ts

 

    import { Control } from "angular/common"; 

    interface ValidationResult { 
     [key:string]:any; 
    } 

    export class CustomValidators { 

     static validateChecked(c: Control): ValidationResult { 
     return (c.value); 
     } 
    } 

Component.ts

 

    import {Component} from '@angular/core'; 

    import { 
     FormBuilder, 
     FormGroup, 
     Validators, FormControl, 
    } from '@angular/forms'; 
    import { CustomValidators } from './validators.ts' 

    @Component({ 
     selector: 'wizard', 
     templateUrl: './template.html', 
    }) 

    /** 
    * @todo - check how first select is automatically active 
    * @todo - export form presets to form class 
    */ 
    export class Wizard { 
     myForm: FormGroup; 

     privacy: boolean; 


     // Prefilling the FormBuilder 
     constructor(private horizonService: HorizonService, fb: FormBuilder) { 
     this.myForm = fb.group({ 
      'privacy': ['', Validators.required, CustomValidators.validateChecked], 
     }); 
     } 

     onSubmit(values: string): void { 
     console.log('you submitted value: ', values); 
     } 
    } 

Answer 1

Tôi nghĩ rằng nếu bạn thay đổi xung quanh của bạn FormGroup constructor một chút, bằng cách chuyển vào một new FormControl() và thêm Validators vào một mảng, nó có thể hoạt động tốt.

cái gì đó như:

export class Wizard { 
    myForm: FormGroup; 

    constructor(private horizonService: HorizonService) { 
     this.myForm = new FormGroup({ 
      privacy: new FormControl('', [ 
       Validators.required, 
       CustomValidators.validateChecked 
      ]) 
     }); 
    } 
} 

Tôi khuyên bạn nên đọc qua bài này trên CUSTOM VALIDATORS IN ANGULAR 2.

Trân trọng.

Answer 2

Bạn nên sử dụng Validators.compose nếu bạn cần nhiều trình xác thực. Vì vậy, mã của bạn phải như sau:

constructor(private horizonService: HorizonService, fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'privacy': ['', Validators.compose([Validators.required, CustomValidators.validateChecked])], 
    }); 
    } 

Bạn có thể đọc bài viết tuyệt vời về trình xác thực here.

Answer 3

Vấn đề chỉ vì thiếu [] khi xác thực.

Hình thức đúng là:

'privacy': ['', [Validators.compose([Validators.required, CustomValidators.validateChecked])]],