[angular] Angular에서 컨트롤을 만든 후 FormControl에 Validator를 추가하는 방법은 무엇입니까?

Program / 글쓴이

동적으로 구축 된 형태를 가진 구성 요소가 있습니다. 유효성 검사기로 컨트롤을 추가하는 코드는 다음과 같습니다.

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

하지만 나중에 2nd Validator를 추가하고 싶다고합시다 . 이것을 어떻게 할 수 있습니까? 온라인에서이 문서를 찾을 수 없습니다. 양식 컨트롤에는 setValidators가 있지만

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

그러나 새로운 또는 사용자 정의 유효성 검사기를 추가하는 방법은 명확하지 않습니다.

답변

FormControl에 유효성 검사기 배열을 전달하기 만하면됩니다.

다음은 기존 FormControl에 유효성 검사기를 추가하는 방법을 보여주는 예입니다.

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

이렇게하면 FormControl을 만들 때 추가 한 기존 유효성 검사기가 재설정됩니다.

답변

@Delosdos가 게시 한 내용을 추가합니다.

에서 컨트롤에 대한 유효성 검사기를 설정 합니다 FormGroup.
this.myForm.controls['controlName'].setValidators([Validators.required])

FormGroup의 컨트롤에서 유효성 검사기를 제거 합니다.
this.myForm.controls['controlName'].clearValidators()

위의 행 중 하나를 실행 한 후 FormGroup을 업데이트 하십시오.
this.myForm.controls['controlName'].updateValueAndValidity()

이것은 양식 유효성 검사를 프로그래밍 방식으로 설정하는 놀라운 방법입니다.

답변

reactFormModule을 사용 중이고 formGroup이 다음과 같이 정의 된 경우 :

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)])
});

이 접근 방식으로 FormControl에 새 유효성 검사기를 추가하고 이전 유효성 검사기 를 유지할 수 있습니다 .

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는 이전에 정의 된 모든 유효성 검사기를 포함하는 작성 유효성 검사기를 반환합니다.

답변

원래 질문은 “formControl을 만든 후 새 유효성 검사기를 추가하는 방법”이기 때문에 선택한 답변이 올바르지 않다고 생각합니다.

내가 아는 한 그것은 불가능합니다. 할 수있는 유일한 일은 유효성 검사기 배열을 동적으로 생성하는 것입니다.

그러나 우리가 놓친 것은 이미 formControl에 추가 된 유효성 검사기를 재정의하지 않도록 addValidator () 함수를 사용하는 것입니다. 누구든지 그 요구 사항에 대한 답변을 가지고 있다면 여기에 게시하면 좋을 것입니다.

답변

Eduard Void 답변 외에도 다음과 같은 addValidators방법이 있습니다.

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 );
};

이를 사용하여 유효성 검사기를 동적으로 설정할 수 있습니다.

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

답변