탭에서 하위 구성 요소의 입력으로 양식 활성화 재 검증 유효성 검사 도구 추가

Question

2 개 입력 (각 구성 요소가 ngbootstrap 탭에 있음)에 하나씩 양식이 작성되었습니다 (상위). 각 하위 구성 요소에 formgroup을 전달하고 각 구성 요소의 ngOnInit에있는 폼 그룹에 유효성 검사기를 추가합니다.

각 구성 요소의 ngOnInit은 탭을 보려면 클릭 한 후에 만 ​​실행된다는 것을 발견했습니다. 즉, 입력이 유효하지 않은 상태에서 시작될 때마다 각 탭을 볼 때까지 전체 양식의 유효성을 확인할 수 없습니다.

이 문제를 해결하는 올바른 방법은 무엇입니까? 탭이 보여 질 때까지 양식 구성 요소가 생성되지 않기 때문에 부모에 유효성 검사기를 추가 할 수 없습니다.

Answer 1

나는이 똑같은 것을 만났다. 필자의 경우에는 내장 된 유효성 검사기에 직접 유효성 검사를 직접 처리하기로 결정했습니다.

내장 된 유효성 검사기는 사용자가 특정 탭에있을 때 즉시 피드백을 제공합니다. 내 유효성 검사 코드는 데이터 모델의 전반적인 유효성을 추적합니다.

내 코드는 여기에 있습니다 : https://github.com/DeborahK/Angular-RoutingAPM-Final 폴더를 확인하십시오.

이

내 유효성 검사 방법은 다음과 같습니다 :

private dataIsValid: { [key: string]: boolean } = {}; 

validate(): void { 
    // Clear the validation object 
    this.dataIsValid = {}; 

    // 'info' tab 
    if (this.product.productName && 
     this.product.productName.length >= 3 && 
     this.product.productCode) { 
     this.dataIsValid['info'] = true; 
    } else { 
     this.dataIsValid['info'] = false; 
    } 

    // 'tags' tab 
    if (this.product.category && 
     this.product.category.length >= 3) { 
     this.dataIsValid['tags'] = true; 
    } else { 
     this.dataIsValid['tags'] = false; 
    } 
} 

dataIsValid가있다

나는 다음과 같은 유효성 검사 오류가있는 모든 탭에 아이콘을 추가 할 수 있었다 각 탭의 이름을 정의하는 키 및 값 쌍의 세트 및 해당 내용이 유효한 경우에는 true이고, 그렇지 않으면 false입니다.

여기에는 HTML의 유효성 검사기와 일치하는 일부 중복 된 코드가 필요하지만 Angular가 폼/구성 요소 기반 유효성 검사 대신 데이터 중심의 유효성 검사 기능을 제공 할 때까지 필요합니다.

참고 :이 예제는 템플릿 기반 양식을 사용하지만 반응 형 양식과 유사한 것을 사용할 수 있습니다.