ng-class在AngularJS表單驗證中

我對以下關於angularJS表單驗證的代碼感到困惑。請參閱下面的HTML表單和JavaScript代碼，它是示例代碼，作爲我們的教師。我不明白的是在此標記ng-class在AngularJS表單驗證中

<div class="form-group" ng-class="{ 'has-error': feedbackForm.firstName.$error.required && !feedbackForm.firstName.$pristine }">

納克級的內部=「{...}」中，「feedbackForm」是形式的名稱，但「名字」是一個屬性在$ scope.feedback對象中，如JavaScript代碼中所述。什麼機制將它們連接在一起，以便可以通過「feedbackFrom.firstName」訪問？

除此之外，「feedbackForm.firstName」後面的「$ error」和「$ pristine」是什麼？它是由AngularJS預定義的對象嗎？再次，如何使用一段時間訪問它們？

HTML表單：

<div ng-controller="FeedbackController"> 
    <form role="form" name="feedbackForm" ng-submit="sendFeedback()" novalidate> 
     <div class="form-group" ng-class="{ 'has-error': feedbackForm.firstName.$error.required &&!feedbackForm.firstName.$pristine }"> 
     <label for="firstname" class="col-sm-2 control-label">First Name</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name" ng model="feedback.firstName" required> 
     <span ng-show="feedbackForm.firstName.$error.required && !feedbackForm.firstName.$pristine" class="help-block">Your first name is required.</span> 
     </div> 
     </div> 
    </form>

相關的JavaScript代碼：

.controller('ContactController', ['$scope', function($scope) { 

    $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" }; 

    var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}]; 

    $scope.channels = channels; 
    $scope.invalidChannelSelection = false; 

    }]) 

    .controller('FeedbackController', ['$scope', function($scope) { 

    $scope.sendFeedback = function() { 

    console.log($scope.feedback); 

    if ($scope.feedback.agree && ($scope.feedback.mychannel == "")) { 
     $scope.invalidChannelSelection = true; 
     console.log('incorrect'); 
     } 
    else { 
     $scope.invalidChannelSelection = false; 
     $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" }; 
     $scope.feedback.mychannel=""; 
     $scope.feedbackForm.$setPristine(); 
     console.log($scope.feedback); 
     } 
    }; 
    }])

來源

2015-12-10 Jun Q

你是有點過。

feedbackForm.firstName參考表格feedbackForm和輸入字段firstName。

$scope.feedback對象被ngModel引用並處理模型綁定。

$error和$pristine是AngularJS添加的類，用於指示輸入字段的狀態。

來源

2015-12-10 21:46:15

謝謝，這有幫助！ –

它可以與「feedbackFrom.firstName」訪問，因爲你已經用「feedbackFrom」命名的形式和在您的輸入中使用值「firstName」具有名稱屬性。

至於表單對象和$錯誤和$原始的，你在doc有，就在這裏：https://docs.angularjs.org/api/ng/type/form.FormController

來源

2015-12-10 21:45:55 Bata

謝謝，這有助於！ –

當您使用角度創建窗體時，將在窗體對象中創建該窗體中每個元素的引用。

$ error和$ pristine是由角度創建來表示表單字段的狀態。如果firstName。$ error = true，那麼在firstName字段中輸入的值不符合驗證要求（例如長度）。 $ pristine告訴角度是否表單已被觸摸。當用戶尚未輸入任何信息時，這可以防止字段顯示爲無效。

TL; DR：

$ scope.feedback.firstName直接指的是輸入字段，而$ scope.feedbackForm.firstName指輸入字段，因爲它涉及到的形式。

來源

2015-12-10 21:48:46 rthill

ng-class在AngularJS表單驗證中

回答

相關問題