2017-10-02 19 views
1

매우 큰 폼이 있으며 여러 폼 그룹으로 구분 된 여러 섹션이 있습니다. 각 섹션의 끝에서 나는 지금까지이모든 입력에서 흐림 효과가 발생했습니다. Angular2 Reactive Forms

checkValidity(g: FormGroup) { 
    Object.keys(g.controls).forEach(key => { 
     g.get(key).markAsDirty(); 
    }); 
    Object.keys(g.controls).forEach(key => { 
     g.get(key).markAsTouched(); 
    }); 
    } 

그것은 잘 작동하지만 내 일반적인 유효성 검사로 인해 및 검증 메시지를 처리는 다음과 같다, 그 형태로 그룹 내 모든 컨트롤의 유효성을 확인하는 체크 버튼이 각 컨트롤의 입력 흐림 이벤트에서 유효성 검사 메시지 자체가 포커스를 맞추고 컨트롤을 흐리게 할 때까지 팝업되지 않습니다. 그래서 위의 메서드에 폼 그룹의 각 Form 컨트롤에 흐림 이벤트를 발생시키는 무언가를 추가하고 싶습니다. 그러나 어떻게하면 그렇게 할 수 있는지 알 수 없었습니다.

document.getElementById ("myAnchor"). blur(); W3Schools에서 ID로 요소를 가져올 수 있고 blur()를 트리거하는 방법을 보여줍니다. 위의 방법을 사용하면 ForEach를 사용하여 FormGroup의 모든 요소에 액세스하여 모든 것에 흐리게 표시 할 수 있습니까? (입력, 텍스트 영역, 라디오 버튼 및 체크 박스)

알아 두십시오.

+0

당신은'document.activeElement.blur()'를 시도 할 수 있습니다 – yurzui

+0

FormGroup의 모든 요소들을 탐색 할 수있는 방법이 있습니까? – David

+0

아니요, FormGroup에는 요소에 대한 참조가 없습니다. 그들은 다리를 통해 연결됩니다. 한 가지 방법은 원숭이 패치입니다. – yurzui

답변

2

방금이 문제에 대한 해결책을 알아 냈습니다. 블러 또는 DOM 이벤트가 발생하지 않았습니다. 이전 문제에 대한 updateValueAndValidity()를 발견 했으므로 모든 컨트롤을 더티로 표시하고 질문에 닿은 것과 똑같은 방법으로 폼 그룹의 각 컨트롤에서이 컨트롤을 호출했습니다. 아래에서 설명했습니다.

checkValidity(g: FormGroup) { 
Object.keys(g.controls).forEach(key => { 
    g.get(key).markAsDirty(); 
}); 
Object.keys(g.controls).forEach(key => { 
    g.get(key).markAsTouched(); 
}); 
Object.keys(g.controls).forEach(key => { 
    g.get(key).updateValueAndValidity(); 
}); 
} 

이 제대로 내가 집중해야하고 이런 일이 할 모든 컨트롤에 흐리게 것 이전에 양식 그룹에서 각 컨트롤에서 유효성 검사 오류 메시지를 표시합니다.