AngularJS电子邮件确认匹配无效?

时间:2016-04-05 01:39:01

标签: html angularjs angularjs-scope match

这是HTML

 $scope.updateUser = {};
 $scope.updateUser.details = {};
 $scope.updateUser.email = '';
 $scope.updateUser.confirm = '';
 $scope.updateUser.details.open = $stateParams.openSetting === 0;
 $scope.userName = userProfile.data.firstname + ' ' + userProfile.data.surname;


 $scope.userCurrentEmail = userProfile.data.email;
 $scope.userContactNumber = userProfile.data.phone;
 $scope.editorEnabled = false;

 $scope.enableEditor = function() {
   $scope.editorEnabled = true;
   //$scope.email = $scope.userCurrentEmail;
   $scope.phone = $scope.userContactNumber;
 };

 $scope.disableEditor = function() {
   $scope.editorEnabled = false;
 };

 $scope.submit = function() {
   $scope.userCurrentEmail = $scope.email;
   $scope.userContactNumber = $scope.phone;
   $scope.disableEditor();

 };
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<form class="updateUserDetailsForm" name="updateUser" ng-submit="updateUser.$valid && submit()" novalidate>
  <a class="btn btn-default" ng-click="enableEditor()">Edit details</a>
  <br />
  <div class="form-group">
    <label for="accountName">Account name</label>
    <p>{{userName}}</p>
  </div>
  <div class="form-group">
    <label for="currentEmail">Your current email</label>
    <p>{{userCurrentEmail}}</p>
  </div>
  <div class="form-group">
    <label for="phoneNumber" ng-hide="editorEnabled">Your phone number</label>
    <p ng-hide="editorEnabled">{{userContactNumber}}</p>
  </div>

  <div ng-show="editorEnabled">
    <div class="form-group required" ng-class="{true: 'has-error'}[submitted && updateUser.email.$invalid]">
      <label for="currentEmail">Your new email <span class="required">(Required)</span>
      </label>
      <input type="email" name="email" class="form-control" placeholder="Please enter your email address" ng-model="email" ng-show="editorEnabled" required>
      <span class="help-inline" ng-show="submitted && updateUser.email.$error.required">Please enter your new email address</span>
      <span class="help-inline" ng-show="submitted && updateUser.email.$error.email">Please enter a valid email</span> 
    </div>
    <div class="form-group required" ng-class="{true: 'has-error'}[submitted && updateUser.confirm.$invalid]">
      <label for="currentEmail">Confirm your new email <span class="required">(Required)</span>
      </label>
      <input type="email" name="confirm" class="form-control" placeholder="Please enter your email address" ng-model="confirm" match="email" ng-show="editorEnabled" required>
      <span class="help-inline" ng-show="submitted && updateUser.confirm.$error.required">Please enter your new email address</span>
      <span class="help-inline" ng-show="submitted && updateUser.confirm.$error.email">Please enter a valid email</span>
      <span class="help-inline" ng-show="submitted && updateUser.confirm.$error.match">Email does not match</span>
    </div>

    <div class="form-group" ng-class="{true: 'has-error'}[submitted && updateUser.phone.$invalid]">
      <label for="phone">Phone number</label>
      <input type="tel" class="form-control" placeholder="Please enter your 10 digit phone number" ng-minlength="10" ng-maxlength="10" name="phone" ng-model="phone" ng-show="editorEnabled">
      <span class="help-inline" ng-show="submitted && ((updateUser.phone.$error.minlength || updateUser.phone.$error.maxlength)) ">Please enter 10 digits phone number</span>
    </div>
    <!-- success meesage -->
    <!--<div class="alert alert-success remove-user-message" role="alert">
                                    Your details have successfully been updated.
                                </div>-->

    <a class="btn btn-success btn-update-user-details" ng-click="submitted=true">Update</a>
    <a class="btn btn-default" ng-click="disableEditor()">Cancel</a>
  </div>

</form>

其余的代码很好,但我正在努力匹配电子邮件字段,以及如何在提交或保存时更改“userCurrentEmail”和“userContactNumber”的值?伙计们能帮帮我吗?

0 个答案:

没有答案