AngularJS-원시 / 더러움과 터치 / 터치되지 않은 차이
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입니다.
자연 그대로의 :이 속성 반환 진정한 경우 요소의 내용이 변경되지 않았습니다.
- 더러운 :이 속성은 반환 사실 경우 요소의 내용이 변경되었습니다 .
- 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.
'Programing' 카테고리의 다른 글
| 클립 보드 기능의 붙여 넣기 이미지는 Gmail 및 Google Chrome 12 이상에서 어떻게 작동합니까? (0) | 2020.06.22 |
|---|---|
| HTML에 왜가 나타 납니까? (0) | 2020.06.22 |
| Docker 컨테이너에서 스키마를 사용하여 MySQL 데이터베이스를 초기화하는 방법은 무엇입니까? (0) | 2020.06.22 |
| 왜 git push gerrit HEAD : git push origin master 대신 refs / for / master가 사용됩니까? (0) | 2020.06.21 |
| HTML5 Canvas 뷰포트의 너비 100 % 높이? (0) | 2020.06.21 |