使用angularJs中的控制器将新的angularJs事件添加到输入值更改的按钮上

时间:2018-05-01 12:09:38

标签: angularjs

如果输入字段的值发生变化,我试图将angularJs事件添加到按钮。但我找不到解决方案我该怎么办呢。我知道如何检测更改但不知道如何使用控制器添加新事件。 让我举例说明:

<form name="addNewCourse">
  <input ng-model="courseNameEdit" ng-value="courseName" ng-pattern="regex" ng-trim="false" name="addNewCourseField" ng-minlength="5" ng-maxlength="60" required>
  <div ng-messages="addNewCourse.addNewCourseField.$error" style="text-align: left !important; color:red;">
    <div ng-message="required">This field is required*</div>
    <div ng-message="pattern">Must be only digits or numbers</div>
    <div ng-message="maxlength">Must not exceed 60 characters</div>
    <div ng-message="minlength">Must not be smaller than 5 characters</div>
  </div>
  <button class="btn btn-primary" ng-click="saveCourseNameFunc(courseNameEdit)">Save</button>
</form>

我想要的是如果使用控制器更改值,则将ng-disabled="addNewCourse.$invalid"添加到按钮中。在此先感谢。

2 个答案:

答案 0 :(得分:0)

如果我在这里没错,那么您将通过控制器更改字段值时验证表单。请尝试以下解决方案,并告诉我这是否对您不起作用。

Allow invalid certificates for resources loaded from localhost

您还可以尝试通过以下控制器触发该字段的更改事件:

FORMOBJECT.$setSubmitted();

希望您能从上面给出的解决方案中获得解决方案。

答案 1 :(得分:0)

ng-change表达式中使用ng-disabled和布尔值如何简单地激活残疾。

<form name="addNewCourse">
  <input ng-change="changed()" ng-disabled="addNewCourse.$invalid && activeDisable"  ng-model="courseNameEdit" ng-value="courseName" ng-pattern="regex" ng-trim="false" name="addNewCourseField" ng-minlength="5" ng-maxlength="60" required>
  <div ng-messages="addNewCourse.addNewCourseField.$error" style="text-align: left !important; color:red;">
    <div ng-message="required">This field is required*</div>
    <div ng-message="pattern">Must be only digits or numbers</div>
    <div ng-message="maxlength">Must not exceed 60 characters</div>
    <div ng-message="minlength">Must not be smaller than 5 characters</div>
  </div>
  <button class="btn btn-primary" ng-click="saveCourseNameFunc(courseNameEdit)">Save</button>
</form>

并且您的控制器必须包含以下内容:

$scope.activeDisable = false;

$scope.change = function(){
     $scope.activeDisable = true;
}