Question

我有一个表单，我们称之为myForm，类似于：

<form name="myForm" class="vertical grid-block shrink" ng-init="initSearch()" ng-submit="doSearch(myForm.$valid)" novalidate>

三个输入字段：一个用于保存详细信息，第二个用作开始日期，第三个用于结束日期。

字段如下所示：

<input id="details" type="text" ng-model="myObject.details" placeholder="DETAILS_PLACEHOLDER">


<input id="from" class="uppercase" type="text" name="from" placeholder="{{datePlaceHolder}}" ng-model="myObject.from" required/>

<input id="until" class="uppercase" type="text" name="until" placeholder="{{datePlaceHolder}}" ng-model="myObject.until"/>

我想根据表单字段显示一个按钮。如果表单字段未更改，则应隐藏按钮。

我尝试使用$dirty，但即使用户输入详细信息然后删除文本，问题仍为$dirty true。任何人都有这方面的解决方案吗？

即使我从另一个可能有另一个控制器的页面返回到表单，解决方案也必须正常工作。

感谢任何帮助。谢谢

Answer 1

这应该解决这个问题。它检查$ pristine，即未触及。

<button ng-show="myForm.$pristine"></button>

Answer 2

看看下面的示例，基本上您需要$viewValue来显示/隐藏提交按钮。

＆＃13;

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.myObject = {};
  $scope.datePlaceHolder = 'from date';
  $scope.datePlaceHolder2 = 'until date';
  $scope.doSearch = function() {
    alert('submit');
  }

  $scope.initSearch = function() {
    console.log('init search called');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <p>Need to fill FROM and UNTIL values to submit</p>
  <form name="myForm" ng-init="initSearch()" ng-submit="doSearch(myForm.$valid)" novalidate>
    <input id="details" type="text" ng-model="myObject.details" placeholder="DETAILS_PLACEHOLDER">

    <input id="from" type="text" name="from" placeholder="{{datePlaceHolder}}" ng-model="myObject.from" required/>

    <input id="until" type="text" name="until" placeholder="{{datePlaceHolder2}}" ng-model="myObject.until" />

    <button type="submit" ng-show="myForm.from.$viewValue && myForm.until.$viewValue">Submit</button>
  </form>
</div>

＆＃13;

您可以为

添加更多条件

ng-show="myForm.from.$viewValue && myForm.until.$viewValue"

请注意，如果从输入中删除值，则提交按钮将消失

检查表单输入字段是否未更改

2 个答案: