예제코드

졸라 잘하시는분 코드 가져왔습니다.
https://medium.com/ngx/3-ways-to-implement-conditional-validation-of-reactive-forms-c59ed6fc3325

private emailValidators = [
         Validators.maxLength(250),
         Validators.minLength(5),
         Validators.pattern(/.+@.+\..+/)
  ];

ngOnInit() {
  this.myForm = this.fb.group({
    myCheckbox: [''],
    myEmailField: ['', this.emailValidators]
  })
  //...
}

...

this.myForm.get('myCheckbox').valueChanges
  .subscribe(value => {
    if(value) {
      this.myForm.get('myEmailField').setValidators(this.emailValidators.concat(Validators.required))
    } else {
      this.myForm.get('myEmailField').setValidators(this.emailValidators);
    }
  });

Set Validators by setting programmatically formControl setValdaidators
https://angular.io/api/forms/AbstractControl#setValidators

시행착오

원래 계획한 행복 로직

formGroup에 존재하는 formControl 값의 변동을 감지하고, 값이 변할때마다 동적으로 유효성 검사 로직을 바꾸고 싶었어요.

예를 들어, 수정화면에서 자산규모, 대출금액, 대출실행일 등등 다양한 값을 받는데, 이 입력필드들의 자산정보라는 그룹으로 묶일 수 있거든요.

• 요구사항은 자산정보에 값이 하나라도 있으면 나머지 값들도 필수 값으로 유효성을 체크해주세요.
• 만약에 값이 하나도 없으면 나머지 값들에서도 필수값 유효성 체크를 빼주세요.

동적으로 유효성 검사 로직을 바꿀때 필요한 요소들

{formGroup}.valueChanges() : formGroup에 등록된 formControl의 값을 감지할 수 있어요.
onChange 이벤트를 form에 등록된 input 필드마다 걸 필요가 없어요.

{formControl}.setValidators() : formControl에 validators를 동적으로 넣어줍니다.
이벤트핸들러에서 formControl에 유효성체크 로직을 추가하거나 갈아끼울 수 있게 됩니다.

{formControl}.updateValueAndValidity() : formContorl의 값 유효성상태를 다시 계산합니다. 그리고 formControl 유효성체크가 적용됐다고 valueChanges 이벤트를 날립니다. ( 옵션을 통해 끌 수 있어요.)

{formControl}.markAsTouched() : formControl을 터치해줍니다.
유효성 체크를 추가했으니 건드려야 유효성체크를 하죠. 그래서 일부러 건드려줍니다.

.valueChanges.subscribe -> .updateValueAndValidity -> .valueChanges.subscribe -> .updateValueAndValidity -> ...

결론은

updateValueAndValidity() 메서드의 제공되는 옵션을 사용해서 구조적인 무한루프를 피해야돼요.

https://stackoverflow.com/a/42438978

  this.form.get(formKey).updateValueAndValidity({
        onlySelf: false,   <-
        emitEvent: false   <-
      });