Trong Angular, làm thế nào để thêm Validator vào FormControl sau khi điều khiển được tạo?

Chúng tôi có một thành phần có một biểu mẫu được xây dựng động. Mã để thêm điều khiển với trình xác thực có thể trông giống như sau:

var c = new FormControl('', Validators.required);

Nhưng hãy nói rằng tôi muốn thêm Trình xác thực thứ hai sau này . Làm thế nào chúng ta có thể thực hiện điều này? Chúng tôi không thể tìm thấy bất kỳ tài liệu nào về điều này trực tuyến. Tôi đã tìm thấy mặc dù trong các điều khiển biểu mẫu có setValidators

this.form.controls["firstName"].setValidators 

nhưng không rõ cách thêm trình xác thực mới hoặc trình xác thực tùy chỉnh.

Bạn chỉ cần chuyển cho FormControl một mảng trình xác nhận.

Dưới đây là một ví dụ cho thấy cách bạn có thể thêm trình xác thực vào FormControl hiện có:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

Lưu ý, điều này sẽ đặt lại mọi trình xác thực hiện có mà bạn đã thêm khi tạo FormControl.

Để thêm vào những gì @Delosdos đã đăng.

Đặt trình xác thực cho một điều khiển trong FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

Xóa trình xác thực khỏi điều khiển trong FormGroup: this.myForm.controls['controlName'].clearValidators()

Cập nhật FormGroup khi bạn đã chạy một trong hai dòng trên. this.myForm.controls['controlName'].updateValueAndValidity()

Đây là một cách tuyệt vời để thiết lập xác thực biểu mẫu của bạn theo chương trình.

Nếu bạn đang sử dụng ReativeFormModule và có formGroup được định nghĩa như sau:

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

bạn có thể thêm một trình xác thực mới ( và giữ những trình xác thực cũ ) vào FormControl bằng cách tiếp cận này:

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validator trả về trình xác thực soạn thư chứa tất cả trình xác thực đã xác định trước đó.

Tôi nghĩ câu trả lời đã chọn là không đúng, vì câu hỏi ban đầu là "làm thế nào để thêm trình xác nhận mới sau khi tạo formControl".

Theo như tôi biết, điều đó là không thể. Điều duy nhất bạn có thể làm là tạo một mảng động của trình xác nhận.

Nhưng những gì chúng tôi bỏ lỡ là có một hàm addValidator () để không ghi đè các trình xác nhận đã được thêm vào formControl. Nếu ai đó có câu trả lời cho yêu cầu đó, rất vui được đăng ở đây.

Ngoài câu trả lời của Eduard Void, đây là addValidatorsphương pháp:

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  this.clearValidators();
  this.setValidators( this.validator ? [ this.validator, ...validators ] : validators );
};

Sử dụng nó, bạn có thể đặt trình xác thực động:

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);