$ dirty vs $ invalid: Sự khác biệt là gì?

Question

Tôi là người mới trong góc. Tôi bị nhầm lẫn bởi $dirty và $invalid, chúng hầu như giống nhau.

Sự khác nhau giữa $dirty và $invalid được sử dụng trong emaildg-model là gì? Dưới đây là scenario. Đó là một mẫu ví dụ 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:

Tôi tự hỏi nếu tôi thay đổi tên ng-mô hình email-email8 nó không làm việc nữa.

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

Dù xác nhận đang làm bởi myForm tên phần tử html mà không được định nghĩa sử dụng ng thuộc tính. Làm thế nào nó hoạt động?

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

Answer 1

• $dirty: Nó sẽ là TRUE, nếu người dùng đã tương tác với biểu mẫu.
• $invalid: Sẽ là TRUE, nếu ít nhất một biểu mẫu có chứa và kiểm soát không hợp lệ.

Source

Also on Angular Docs

Sau khi cập nhật trong câu hỏi ... Các xác nhận đang được thực hiện trên các tên phần tử form. Tất cả các mô hình ng bên trong một biểu mẫu được theo dõi và đó là cách nó hoạt động.

Đồng thời thay đổi tên kiểu ng sẽ không ảnh hưởng đến xác thực. Tôi đã thử liên kết của bạn và nó hoạt động cho tôi. Điều đó phải làm việc.

Answer 2

$ dirty là True nếu người dùng đã tương tác với đầu vào. Và $ không hợp lệ là true nếu đầu vào không phải là địa chỉ email hợp lệ

Answer 3

$dirty có nghĩa là người dùng đã thay đổi giá trị đầu vào, $invalid có nghĩa là địa chỉ không hợp lệ. Do đó, lỗi chỉ được hiển thị nếu người dùng đã chủ động thay đổi giá trị đầu vào thành giá trị trống hoặc không hợp lệ.

Answer 4

$error là đối tượng sai sót nơi chìa khóa là tên xác nhận hiện trường và giá trị là thông báo lỗi thực tế

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

ví dụ này myForm.emailName.$error.email = true nếu email không phù hợp với định dạng. myForm.emailName.$error.required = true nếu bạn chưa thêm anyhting trong lĩnh vực đầu vào

bạn có thể kiểm tra hợp lệ hay không của lĩnh vực này trực tiếp bằng cách sử dụng myForm.emailName.$valid nhưng vấn đề trong trường hợp của bạn là họ muốn thể hiện cho người dùng lỗi là gì bởi có hai các trường hợp.để họ tham gia vào $error object để kiểm tra sự error is required email or invalid email

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

để họ sử dụng $error đối tượng. đây là cách myForm.emailName trông:

{"$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} 

Tôi nghĩ ví dụ do bạn giải thích rất nhiều.