Как вернуть `форму` как недействительную?

Question

Как вернуть `форму` как недействительную?

0

Я сравниваю поле password и fields. when user wrongly types even in повтора fields. when user wrongly types even in fields. when user wrongly types even in fields я am throwing error. But the повтора, fields я am throwing error. But the fields я am throwing error. But the кнопка submit позволяет.

Я понимаю, что мне нужно было сделать форму, которая стала $invalid как это сделать? вместо проверки переменной в "ng-disbaled" в кнопке отправки?

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.myFormDetails = function ( userInfo ) {
    
    console.log( userInfo );
    
  }
  
});

label{
  display:block;
  padding:1em;
}

span.error{
  display:block;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MainCtrl">
    
    <form name="myForm" novalidate ng-submit="myFormDetails(userInfo)">
      
      <label for="password">
        Enter Password
        <input type="password" ng-pattern="/^[^\s]+$/" name="password" ng-model="userInfo.password" id="password" required>
        <span class="error"  
          ng-show="myForm.password.$dirty && !myForm.password.$valid">
            Please Provide Valid Password
          </span>
      </label>
      
      <label for="password">
        Re-Enter Password
        <input type="password" name="repassword" id="repassword" ng-model="userInfo.repassword" required>
        <span class="error" 
        ng-show="myForm.repassword.$dirty &&
          (userInfo.password != userInfo.repassword || myForm.repassword.$invalid)">
          Password not matching
      </span>
      </label>
      <label for="submit">
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
      </label>
    </form>
    
  </div>

user2024080 01 дек. 2015, в 04:43

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Sasi Kiran · Answer 1 · 2015-12-01T01-26-00.000Z

Снимите атрибут novalidate в теге формы.

Он указывает, что данные формы (ввод) не должны проверяться при их отправке.

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.myFormDetails = function ( userInfo ) {
    
    console.log( userInfo );
    
  }
  
});

label{
  display:block;
  padding:1em;
}

span.error{
  display:block;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MainCtrl">
    
    <form name="myForm" ng-submit="myFormDetails(userInfo)">
      
      <label for="password">
        Enter Password
        <input type="password" ng-pattern="/^[^\s]+$/" name="password" ng-model="userInfo.password" id="password" required>
        <span class="error"  
          ng-show="myForm.password.$dirty && !myForm.password.$valid">
            Please Provide Valid Password
          </span>
      </label>
      
      <label for="password">
        Re-Enter Password
        <input type="password" name="repassword" id="repassword" ng-model="userInfo.repassword" required>
        <span class="error" 
        ng-show="myForm.repassword.$dirty &&
          (userInfo.password != userInfo.repassword || myForm.repassword.$invalid)">
          Password not matching
      </span>
      </label>
      <label for="submit">
        <button type="submit" ng-disabled="userInfo.password != userInfo.repassword || myForm.$invalid">Submit</button>
      </label>
    </form>
    
  </div>

Но, удаляя это, я нахожу метки ошибки html5 в Firefox
Я попробовал в хроме. Я не берег вокруг Firefox. Но если вы продолжите аннулировать форму, форма не будет подтверждена. novalidate является только атрибутом html5 и поддерживается для Firefox 4.0