相关疑难解决方法(0)

角度 - 原始/脏和触摸/未触摸之间的差异

关于形式的 Angular 官方文档告诉我们有很多关于形式和领域的风格和指令.对于每一个,CSS类:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched
Run Code Online (Sandbox Code Playgroud)

有什么区别pristine/dirty,和touched/untouched

angularjs

140
推荐指数
5
解决办法
12万
查看次数

Angular clear子表单数据和重置验证

我正在尝试<div ng-form="vacancyForm">使用Angular.js 创建一个子表单

有一种数据有很多字段

  • 标题
  • 可用日期
  • 价钱

所有人都required对它们进行了验证

一旦我提交了这些数据,我就会用它做我需要的但是我想重置子表单以便所有字段都不脏并且表单有效,因为目前清除字段工作但所有字段都无效,因为它们现在是脏的,但是将它们标记为无效.

示例字段

<div class="control-group" ng-class="getErrorClasses(vacancyForm.headline)">
     <label class="control-label" for="headline">Headline</label>
     <div class="controls">
         <input type="text" class="input-xlarge" id="headline" name="headline" required ng-model="new_vacancy.headline">
         <span class="help-inline" ng-show="showError(vacancyForm.headline, 'required')">This field is required</span>
      </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是提交时调用的函数

 $scope.addVacancy = function(){

        // save the submitted data
        $scope.school.vacancies.push($scope.new_vacancy);

        // now clear it out
        $scope.new_vacancy = {};
        $scope.new_vacancy.date = new Date();

        // this clears out all the fields and makes them all invalid 
        // as they are empty. how to reset …
Run Code Online (Sandbox Code Playgroud)

angularjs

57
推荐指数
1
解决办法
7万
查看次数

如何重置表单,包括删除所有验证错误?

我有一个Angular表格.使用该ng-pattern属性验证字段.我也有一个重置按钮.我正在使用Ui.Utils Event Binder来处理这样的reset事件:

<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
  <div>
    <label>
      Area Code
      <input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern">The area code must be three digits</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern">The phone number must be seven digits</div>
    </div>
  </div>

  <br>
  <div>
    <button type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,当表单重置时,它会调用表单上的reset方法$scope.这是整个控制器的样子:

angular.module('app').controller('mainController', function($scope) {
    $scope.resetCount = …
Run Code Online (Sandbox Code Playgroud)

html angularjs ng-messages

24
推荐指数
4
解决办法
5万
查看次数

提交表单后如何重置表单和验证(AngularJS)

提交表单后,我想重置表单和所有验证消息。这是小矮人:http ://plnkr.co/edit/992RP8gemIjgc3KxzLvQ? p =preview

我的代码如下:

控制器:

app.controller('MainCtrl', function($scope) {
  $scope.data={fullName:''};

  $scope.submit=function(){
    console.log('submit')
    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();
    $scope.data={fullName:''};
  }
});
Run Code Online (Sandbox Code Playgroud)

HTML:

<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div>
    <label class="control-label">Name</label>
    <input
            name="full_name"
            type="text"
            ng-model="data.fullName"
            ng-required="true">

    <p ng-if="myForm.$submitted && myForm.$invalid">Validation message</p>
</div>
<button ng-click="submit()" type="submit">
    Submit
</button>
</form>
</body>
Run Code Online (Sandbox Code Playgroud)

我的问题是:当用户在输入中输入名称并单击Submit按钮时,不应显示验证消息,因为应该重置模型,表单和验证。我该怎么办?

我尝试使用$ setPristine()和$ setUntouched(),但它对我不起作用。

在AngularJS中可以做吗?谢谢!

javascript validation angularjs

3
推荐指数
1
解决办法
9667
查看次数

标签 统计

angularjs ×4

html ×1

javascript ×1

ng-messages ×1

validation ×1