我已经在离子角度和应用验证上创建了一个表单.Validations无法正常工作.即使所有字段都是空的点击提交按钮它调用控制器功能.
请帮我解决这个问题.
请帮我解决这个问题.
<ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Register</h1> </ion-header-bar> <ion-content > <form name="register" ng-submit="submitDetails(user)" novalidate=""> <div class="list"> <label class="item item-input item-floating-label" style="position:relative;"> <span class="input-label">First Name</span> <input type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true"> <p ng-show="user.firstName.$invalid && !user.firstName.$pristine" class="help-block">You name is required.</p> </label> <label class="item item-input item-floating-label"> <span class="input-label">Email</span> <input type="email" placeholder="Email" ng-model="user.email" ng-required="true"> <p ng-show="user.email.$invalid && !user.email.$pristine" class="help-block">Enter a valid email</p> </label> <label class="item item-input item-floating-label"> <span class="input-label" >Phone no</span> <input type="number" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true"> <span class="help-block" ng-show="user.phone.$error.required || user.phone.$error.number">Valid phone number is required</span> <span class="help-block" ng-show="((user.phone.$error.minlength || user.phone.$error.maxlength) && user.phone.$dirty) ">phone number should be 10 digits</span> </label> <input type="submit" class="button button-royal" value="register"> </div> </form> </ion-content> </ion-pane>
控制器代码
chatApp.controller('RegisterCntrl',function($scope,$stateParams) { $scope.user={}; $scope.submitDetails=function(user){ alert("user"+user.firstName); }; });
解决方法
这应该工作
<form name="register_form" ng-submit="submitDetails(user)" novalidate=""> <div class="list"> <label class="item item-input item-floating-label" style="position:relative;"> <span class="input-label">First Name</span> <input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true"> <p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p> </label> <!--omitted--> <input type="submit" class="button button-royal" value="register"> </div> </form>
表格名称为register_form,
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
输入名称是user_first_name,
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
因此验证必须通过这些字段
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
模型本身没有$invalid或$pristine属性,所以它没有意义
对于电话领域
<input type="number" name="user_phone" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true"> <span class="help-block" ng-show="register_form.user_phone.$error.required || register_form.user_phone.$error.number">Valid phone number is required</span> <span class="help-block" ng-show="((register_form.user_phone.$error.minlength || register_form.user_phone.$error.maxlength) && register_form.user_phone.$dirty) ">phone number should be 10 digits</span>
如需进一步阅读,请查看this answer