source

Angular JS - 오염되지 않은 것과 만져지지 않은 것의 차이

nicesource 2023. 3. 15. 19:44
반응형

Angular JS - 오염되지 않은 것과 만져지지 않은 것의 차이

AngularJS Developer Guide - Forms(양식)에는 양식과 필드에 관한 다양한 스타일과 지시사항이 나열되어 있습니다.각 CSS 클래스:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

와의 차이는 무엇입니까?pristine/dirty,그리고.touched/untouched?

AngularJS Developer Guide - Angular에서 사용하는 CSS 클래스JS

  • @property {boolean} $untouched 컨트롤이 아직 포커스를 잃지 않은 경우 True입니다.
  • @property {boolean} $touched 컨트롤이 포커스를 잃었을 경우 True입니다.
  • @property {boolean} $pris틴 사용자가 아직 컨트롤과 상호 작용하지 않은 경우 True입니다.
  • @property {boolean} $dirty 사용자가 컨트롤과 이미 상호 작용한 경우 True입니다.

$pristine/$dirty사용자가 실제로 변경했는지 아닌지를 나타냅니다.$touched/$untouched에, 유저가 단지 거기에 있었는지 아닌지를 나타냅니다.

이것은 검증에 매우 유용합니다.이유$dirty는, 유저가 실제로 특정의 컨트롤에 액세스 할 때까지, 항상 검증 응답을 표시하지 않는 것입니다.단, 이 명령어만 사용하여$dirty사용자는 실제로 값을 변경하지 않는 한 검증 피드백을 받을 수 없습니다.그래서...$invalid사용자가 값을 변경하거나 변경하지 않으면 필드에 프롬프트가 표시되지 않습니다.사용자가 단순히 필수 필드를 무시하고 탭으로 표시하면 제출하기 전까지 모든 것이 정상으로 표시됩니다.

Angular 1.3 및ng-touched이제 사용자가 값을 실제로 편집했는지 여부에 관계없이 사용자가 방문한 후 흐릿해지면 바로 컨트롤에 특정 스타일을 설정할 수 있습니다.

여기 행동 차이를 보여주는 CodePen이 있습니다.

Pro Angular-6의 상세한 내용은 다음과 같습니다.

  • valid: 요소의 내용이 유효하면 true를 반환하고 그렇지 않으면 false반환합니다.
  • 무효:이 속성은 요소의 내용이 올바르지 않으면 true를 반환하고 그렇지 않으면 false반환합니다.

  • 원래대로:요소의 내용이 변경되지 않은 경우 이 속성은 true를 반환합니다.

  • dirty: 요소의 내용이 변경된 경우 이 속성은 true를 반환합니다.
  • 손대지 않음:사용자가 요소를 방문하지 않은 경우 이 속성은 true반환합니다.
  • 터치:사용자가 요소를 방문한 경우 이 속성은 true를 반환합니다.

늦은 답변이지만 도움이 되길 바랍니다.

시나리오 1: 사이트를 처음 방문하여 어떤 필드도 건드리지 않았습니다.형상이란

ng-syslog 및 ng-syslog

시나리오 2: 현재 폼의 특정 필드에 값을 입력하고 있습니다.그럼 상태는

ng-syslog 및 ng-syslog

시나리오 3: 필드에 값을 입력하고 다음 필드로 이동했습니다.

ng-syslog 및 ng-syslog

시나리오 4: 폼에 전화번호 필드가 있다고 가정합니다.번호는 입력했지만 실제로는9자리이지만 전화번호에는 10자리가 필요합니다.그러면 상태는 ng-invalid가 됩니다.

요컨대:

ng-syslog:양식 필드를 아직 방문하지 않은 경우

ng-syslog:양식 필드를 방문했을 때 필드의 포커스를 잃었을 때

ng-syslog:양식 필드 값은 변경되지 않습니다.

ng-syslog:폼 필드 값이 변경되었습니다.

ng-valid : 폼필드의 모든 검증이 성공한 경우

ng-syslog:양식 필드의 유효성 검사에 성공하지 못한 경우

검증 속성은 양식양식 요소에 따라 다르다는 점을 언급할 필요가 있습니다(터치 및 비터치는 필드만 해당).

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.

언급URL : https://stackoverflow.com/questions/25025102/angularjs-difference-between-pristine-dirty-and-touched-untouched

반응형