Question

我对以下有关angularJS表单验证的代码感到困惑。请参阅下面的HTML表单和JavaScript代码，这是我们的讲师给出的示例代码。我不明白的是这个标签

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

在ng-class =＆＃34; {...}＆＃34;内，＆＃34; feedbackForm＆＃34;是表单的名称，但是＆＃34; firstName＆＃34;是$ scope.feedback对象的一个属性，如JavaScript代码中所述。什么机制将它们连接在一起，以便可以通过＆＃34; feedbackFrom.firstName＆＃34;？

除此之外，＆＃34; $错误＆＃34;和＆＃34; $ pristine＆＃34;紧跟在＆＃34; feedbackForm.firstName＆＃34;？之后它是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);
       }
     };
  }])

Answer 1

你有点不对。

feedbackForm.firstName引用表单feedbackForm和输入字段firstName。

ngModel引用$scope.feedback对象并处理模型绑定。

$error和$pristine是AngularJS添加的类，用于指示输入字段的状态。

Answer 2

使用angular创建表单时，将在表单对象中创建该表单中每个元素的引用。

$ error和$ pristine由angular创建，表示表单字段的状态。如果firstName。$ error = true，则在firstName字段中输入的值不符合验证要求（例如长度）。 $ pristine告诉角度表单是否被触及。这样，当用户尚未输入任何信息时，该字段不会显示为无效。

TL; DR：

$ scope.feedback.firstName直接引用输入字段，而$ scope.feedbackForm.firstName引用与表单相关的输入字段。

Answer 3

可以使用＆＃34; feedbackFrom.firstName＆＃34;进行访问。因为您已使用＆＃34; feedbackFrom＆＃34;来命名您的表单。并在输入中使用值＆＃34; firstName＆＃34;。

至于表单对象及其$ error和$ pristine，你可以在文档中找到它：https://docs.angularjs.org/api/ng/type/form.FormController

AngularJS表格验证中的ng-class

3 个答案: