javascript - AngularJS - skillnaden mellan pristine/dirty och touched/untouched

AngularJS-utvecklarguide - Formulär listar många stilar och direktiv som rör formulär och fält. För varje enskilt en CSS-klass:

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

Vad är skillnaden mellan pristine/dirty och touched/untouched?

Svar #1

AngularJS Utvecklargaride - CSS-klasser som används av AngularJS

@property {boolean} $untouched Sant om kontrollen ännu inte har tappat fokus.
@property {boolean} $touched Sant om kontrollen har tappat fokus.
@property {boolean} $pristine Sant om användaren ännu inte har interagerat med kontrollen.
@property {boolean} $dirty Sant om användaren redan har interagerat med kontrollen.

Svar #2

$pristine/$dirty berättar om användaren faktiskt ändrat något, medan $touched/$untouched berättar om användaren bara varit där/visited.

Detta är verkligen användbart för validering. Anledningen till $dirty har alltid varit att undvika att visa valideringsmeddelanden tills användaren faktiskt har besökt en viss kontroll. Men genom att endast använda $dirty-egenskapen skulle användaren inte få någon valideringsfeedback om de inte faktiskt ändrade värdet. Så ett $invalid-fält skulle fortfarande inte visa användaren en uppmaning om användaren inte ändrade/interagerade med värdet. Om användaren helt enkelt tabbade igenom ett obligatoriskt fält och ignorerade det, såg allt bra ut tills du skickade in.

Med Angular 1.3 och ng-touched kan du nu ställa in en viss stil på en kontroll så snart användaren har besökt och sedan lämnat den, oavsett om de faktiskt redigerade värdet eller inte.

Här är en CodePen som visar skillnaden i beteende.

Svar #3

I boken Pro Angular-6 beskrivs det i detalj enligt nedan;

giltig: Denna egenskap returnerar true om elementets innehåll är giltigt och false annars.
ogiltig: Denna egenskap returnerar true om elementets innehåll är ogiltigt och false annars.
pristine: Denna egenskap returnerar true om elementets innehåll inte har ändrats.
dirty: Denna egenskap returnerar true om elementets innehåll har ändrats.
oberörd: Denna egenskap returnerar true om användaren inte har besökt elementet.
touched: Denna egenskap returnerar true om användaren har besökt elementet.

Svar #4

Detta är ett sent svar men hoppas att detta kan hjälpa.

Scenario 1: Du besökte webbplatsen för första gången och rörde inget fält. Formulärets tillstånd är

ng-orerörd och ng-oförstörd

Scenario 2: Du matar för närvarande in värdena i ett specifikt fält i formuläret. Då är tillståndet

ng-orerörd och ng-smutsig

Scenario 3: Du är klar med att ange värdena i fältet och har gått vidare till nästa fält

ng-touched och ng-dirty

Scenario 4: Säg att ett formulär har ett telefonnummerfält. Du har fyllt i numret men du har faktiskt fyllt i 9 siffror men 10 siffror krävs för ett telefonnummer. Då är tillståndet ng-invalid

Kort sagt:

ng-untouched: När formulärfältet ännu inte har besökts

ng-touched: När formulärfältet besöks OCH fältet har förlorat fokus

ng-pristine: Formulärfältets värde har inte ändrats

ng-dirty: Formulärfältets värde har ändrats

ng-valid : När alla valideringar av formulärfält är framgångsrika

ng-invalid: När någon validering av formulärfält inte lyckas

Svar #5

Det är värt att nämna att valideringsegenskaperna är olika för formulär och formfält (notera att touched och untouched endast gäller fält):