$ dirtyと$ invalid：違いは何ですか？

Question

私は初心者です。私は$dirtyと$invalidで混乱していますが、ほとんど同じように思えます。

emaildg-modelで使用されている$dirtyと$invalidの違いは何ですか？以下はscenarioです。例文W3Schoolsです。

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> 
    <p> 
     Username:<br> 
     <input type="text" name="user" ng-model="user" required> 
     <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
      <span ng-show="myForm.user.$error.required">Username is required.</span> 
     </span> 
    </p> 
    <p> 
     Email:<br> 
     <input type="email" name="emaill" ng-model="email" required> 
     <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
      <span ng-show="myForm.email.$error.required">Email is required.</span> 
      <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
     </span> 
    </p> 
    <p> 
     <input type="submit" ng-click="Count()" 
      ng-disabled="myForm.$invalid" title="Submit" value="Submit"> 
    </p> 
</form> 

EDIT 1：

私はこれ以上働いていないemailからemail8にNG-モデル名を変更した場合、私は疑問に思うのです。検証がng属性を使用して定義されていないmyForm html要素名でやっているかどうか

<input type="email" name="emaill" ng-model="email8" required> 

。どのように機能するのですか？

ng-show="myForm.email.$dirty && myForm.email.$invalid" 

Answer 1

• $dirty：ユーザーがすでにフォームと相互作用した場合は、TRUEになります。
• $invalid：少なくともフォームとコントロールを含む1つが無効な場合はTRUEになります。問題の更新後

  Also on Angular Docs

  Source

は...検証は、フォーム要素名で行われています。フォーム内のすべてのngモデルが追跡され、それがどのように動作しているかです。

また、モデル名を変更しても、検証には影響しません。私はあなたのリンクを試して、それは私のために働く。それはうまくいきます。

Answer 2

$ dirtyは、ユーザーがすでに入力と対話している場合はTrueです。入力が有効な電子メールアドレスでない場合は無効です$

Answer 3

は、ユーザが入力値を変更したことを意味します。$invalidは、アドレス自体が無効であることを意味します。したがって、ユーザーが入力値を空の値または無効な値に変更した場合にのみエラーが表示されます。

Answer 4

$errorキー電子メールがフォーマットと一致しない場合、フィールドの検証の名前と値が実際のエラーメッセージこの例myForm.emailName.$error.email = trueため

<input type="email" name="emailName" ng-model="email" required> 

あるエラーの目的です。あなたが直接あなたのケースでmyForm.emailName.$validが、 問題を使用して

あなたが有効かどうか、フィールドのチェックすることができ、入力フィールドにanyhtingを追加していない場合 myForm.emailName.$error.required = trueは、彼らはエラーが2を持つことが何であるかをユーザに見せたいですケース。そう、彼らはそう、彼らは$errorオブジェクトを使用error is required email or invalid email

1.Email is required. 
2.Invalid email address. 

を確認するために$error objectを締結しました。 これはmyForm.emailNameがどのように見えるかです：

{"$viewValue":"ss","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":false,"$touched":true,"$pristine":false,"$dirty":true,"$valid":false,"$invalid":true,"$error":{"email":true},"$name":"emailName","$options":null} 

私は例があなたによって提供さだと思う多くのことを説明しています。