我对以下有关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);
}
};
}])
答案 0 :(得分:1)
你有点不对。
feedbackForm.firstName
引用表单feedbackForm
和输入字段firstName
。
ngModel引用$scope.feedback
对象并处理模型绑定。
$error
和$pristine
是AngularJS添加的类,用于指示输入字段的状态。
答案 1 :(得分:1)
使用angular创建表单时,将在表单对象中创建该表单中每个元素的引用。
$ error和$ pristine由angular创建,表示表单字段的状态。如果firstName。$ error = true,则在firstName字段中输入的值不符合验证要求(例如长度)。 $ pristine告诉角度表单是否被触及。这样,当用户尚未输入任何信息时,该字段不会显示为无效。
TL; DR:
$ scope.feedback.firstName直接引用输入字段,而$ scope.feedbackForm.firstName引用与表单相关的输入字段。
答案 2 :(得分:0)
可以使用&#34; feedbackFrom.firstName&#34;进行访问。因为您已使用&#34; feedbackFrom&#34;来命名您的表单。并在输入中使用值&#34; firstName&#34;。
至于表单对象及其$ error和$ pristine,你可以在文档中找到它:https://docs.angularjs.org/api/ng/type/form.FormController