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


84

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

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

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

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

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

답변:


109

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

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

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

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


5
하 ... 때로는 무언가를 너무 오래 쳐다 보면 그냥 물러나는 것이 가장 좋습니다. 감사합니다!!
melegant

1
유효성 검사를 제거하는 방법이 있습니까
Abhijith ss aug

7
이전 항목을 재정의하지 않고이를 수행 할 수있는 방법이 있습니까? 또는 새로운 것을 추가하는 방법은 무엇입니까?
danday74

1
@ danday74,이 질문 하단에있는 Eduard Void의 답변을 확인하십시오. imo 대답을 받아 들여야합니다. 그는 당신이 알아야 할 일을 어떻게해야하는지 설명해 주었고 저도 어떻게해야하는지 알아야했습니다.
Chris

6
.updateValueAndValidity()새 유효성 검사기를 설정 한 후 양식 컨트롤 도 호출해야했습니다 .
Keeleon

82

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

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

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

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

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


1
나를 위해 그것은 마지막 줄없이 작동했습니다. Angular의 새 버전은 이제 자체적으로 양식 유효성을 업데이트한다고 확신합니다. 그러나 방법에 대해 알려 주셔서 감사합니다 updateValueAndValidity. 언젠가는 도움이 될 것입니다!
Nino Filiu

@NinoFiliu updateValueAndValidity는 여전히 유효성 검사를 수행하는 데 사용되며 최신 버전의 Angular에서는 다르게 처리되지 않습니다. 무엇 일어나는 것은 setValidators유효성 검사기를 업데이트하지만 유효성 검사를 실행하지 않으며, 당신은 사용 updateValueAndValidity검증을 수행 할 수 있습니다. 변경 감지가 처리하는 지점에서 유효성 검사기를 설정해야하지만, updateValueAndValidity방금 설정 한 유효성 검사기에 따라 그룹 또는 제어에서 사용 하는 것을 찾을 수 있습니다 -github.com/angular/angular/issues/19622#issuecomment- 341547884 .
mtpultz

4
저는 Angular 6을 사용 중이며 updateValueAndValidity. 감사합니다 @shammelburg!
Oli Crt

1
Angular 7에서는 마지막 업데이트 줄 없이는 작동하지 않습니다.
David Findlay

예. 없이 작동 updateValueAndValidity()하지만 경우에 따라 작동하지 않습니다. 당신이 추가 한 경우 updateValueAndValidity()이후에 setValidators()그것은 것입니다 즉시 제어와 관련된 변화에 영향을 . 따라서 updateValueAndValidity ()`를 추가하는 것이 좋습니다.
Jamith NImantha

72

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


13
Imo 이것은 받아 들여진 대답이어야합니다. 요청 된 OP와 같은 유효성 검사기를 추가하는 방법을 보여줄뿐만 아니라 이전에 설정된 유효성 검사기를 유지하는 방법도 보여줍니다. 내가 이미 가지고있는 일부 유효성 검사기를 덮어 쓰고 싶지 않았지만 여전히 추가 유효성 검사기를 프로그래밍 방식으로 추가해야했기 때문에 수락 된 답변을 읽은 후 수행하는 방법을 검색 한 첫 번째 작업이었습니다. 이 답변을 주셔서 감사합니다 @Eduard Void
Chris

3
전임자와 동의합니다. 문제는 어떻게 교체 할 것인지가 아니라 컨트롤 폼에 새로운 유효성 검사기 를 추가 하는 방법이었습니다 .
Plusce

5
나는 control.setValidators(control.validator ? [ control.validator, Validators.email ] : Validators.email);엄격한 null 검사를
William Lohan

3

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

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

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


1
당신 control.setValidators(control.validator ? [ control.validator, Validators.email ] : Validators.email);은 일할 것이라고 생각할 것입니다.
William Lohan

2
@Eduard Void의 답변 참조 stackoverflow.com/a/53276815/6656422
William Lohan

3

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 ]);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.