AngularJS 개발자 가이드-양식 은 양식 및 필드와 관련된 많은 스타일과 지시문이 있음을 알려줍니다. 각각에 대해 CSS 클래스 :
ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched
pristine/dirty, 및 의 차이점은 무엇입니까 touched/untouched?
답변
AngularJS 개발자 가이드-AngularJS에서 사용하는 CSS 클래스
- @property {boolean} $ untouched 컨트롤이 아직 포커스를 잃지 않은 경우 True입니다.
- @property {boolean} $ touched 컨트롤이 포커스를 잃은 경우 True입니다.
- @property {boolean} $ pristine 사용자가 아직 컨트롤과 상호 작용하지 않은 경우 True입니다.
- @property {boolean} $ dirty 사용자가 이미 컨트롤과 상호 작용 한 경우 True입니다.
답변
$pristine/ $dirty는 사용자가 실제로 변경 했는지 여부를 알려주고 , $touched/ $untouched는 사용자가 단순히 거기에 / 방문한 적이 있는지 여부를 알려줍니다 .
이것은 유효성 검사에 정말 유용합니다. 그 이유 $dirty는 사용자가 실제로 특정 컨트롤을 방문 할 때까지 항상 유효성 검사 응답을 표시하지 않기 위해서입니다. 그러나 $dirty속성 만 사용 하면 사용자가 실제로 값을 변경하지 않는 한 유효성 검사 피드백을받을 수 없습니다. 따라서 $invalid필드는 사용자가 값을 변경 / 상호 작용하지 않은 경우 사용자에게 프롬프트를 표시하지 않습니다. 사용자가 필수 필드를 완전히 무시하면 모든 것이 정상으로 보입니다.
Angular 1.3 및를 사용하면 ng-touched사용자가 실제로 값을 편집했는지 여부에 관계없이 사용자가 흐리게 처리되는 즉시 컨트롤에 특정 스타일을 설정할 수 있습니다.
다음 은 동작의 차이를 보여주는 CodePen 입니다.
답변
Pro Angular-6 책 은 아래와 같이 자세히 설명되어 있습니다.
- valid :이 속성은 요소의 내용이 유효 하면 true를 반환 하고 그렇지 않으면 false를 반환합니다.
-
무효 :이 속성 반환 진정한 경우 요소의 내용은, 그렇지 않으면 무효 및 false입니다.
-
pristine :이 속성은 요소의 내용이 변경되지 않은 경우 true를 반환 합니다 .
- dirty :이 속성은 요소의 내용이 변경된 경우 true를 반환 합니다 .
- untouched :이 속성은 사용자가 요소를 방문하지 않은 경우 true를 반환 합니다 .
- touched :이 속성은 사용자가 요소를 방문한 경우 true를 반환 합니다 .
답변
양식 및 양식 요소에 대한 유효성 검사 속성이 다르다는 점을 언급 할 가치가 있습니다 (접촉 및 수정되지 않음은 필드에만 해당됨).
Input fields have the following states:
$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
They are all properties of the input field, and are either true or false.
Forms have the following states:
$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted
They are all properties of the form, and are either true or false.
답변
