如何在angularjs中创建自定义输入字段答案

【问题标题】：How to create custom input feild in angular js如何在angularjs中创建自定义输入字段
【发布时间】：2016-04-16 07:51:29
【问题描述】：

我一直在开发一个自定义输入包装器，它添加了错误文本处理等。问题是我无法通过检查外部范围在重置时更新的范围来重置模型值。指令的内部范围没有，我不知道为什么。

将指令中的 ng-model watch 从 scope.$watch(ngModel, function() { 更改为 scope.$watch('ngModel', function() { 会导致重置工作但随后重置不起作用当 viewValue 无效时，重置也应该在这种情况下起作用。

我做错了什么吗？下面的代码reporoduces这个问题。

var app = angular.module('app', []);
app.directive('myInput', function() {
  return {
      restrict: "E",
      require: "ngModel",
      template: $('#myInput').html(),
      scope: {
        "ngModel": "=",
        "name": "@",
        "type": "@",
        "label": "@",
        "errorLabel": "@",
        "placeholder": "@"
      },
      link: function(scope, element, attributes, ngModel) {

        scope.$watch('ngModel', function() {
          scope.value = scope.ngModel;
          console.log('got value: ' + scope.value);
        });
        scope.$watch('value', function() {
          if(scope.value) {
            ngModel.$setViewValue(scope.value);
          }
        });
      }
  };
});

app.controller('user', ['$scope', function($scope) {
  $scope.currentUser = {
    email: "person@site.com"
  };
  $scope.resetUser = function() {
    console.log('resetting user');
    console.log($scope.user);
    $scope.user = angular.copy($scope.currentUser);
    console.log($scope.user);
  };
  $scope.submitUser = function(user) {
    console.log('submitting user');
    console.log(user);
  };
  $scope.resetUser();
}]);

.error {
  color: red;
}
.my-input {
  border: 5px solid transparent;
}
.ng-invalid.my-input {
  border: 5px solid red;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/html" id="myInput">
    <ng-form name="thisForm">
      <label
        ng-class="{error: thisForm.$invalid}"
        for="{{name}}"
        ng-bind="thisForm.$valid ? label : errorLabel"></label></br>
      <input
        class="my-input"
        name="{{name}}"
        type="{{type}}"
        placeholder="{{placeholder}}"
        ng-model="value"></input>
    </ng-form>
  </script>
  
</head>
<body ng-app="app">
  <div ng-controller="user">
    <ng-form name="userForm">
      <my-input
        type="email"
        ng-model="user.email"
        error-label="Enter a valid Email"
        label="Email"
        placeholder="Enter an Email"
        name="Email"></my-input>
      </br>
      <button ng-click="resetUser()">Reset</button>
      <button ng-click="submitUser(user)" ng-disabled="userForm.$invalid">Submit</button>
    </ng-form>
  </div>
  
</body>
</html>

【问题讨论】：

标签： javascript angularjs angular-ngmodel

【解决方案1】：

如果你剩下的问题是当你的输入无效时你的观察者没有触发（没有通过 Angular 电子邮件测试），那是因为如果输入没有通过验证，Angular 不会更新你的模型。请查看this issue进行比较。

无论如何，我建议使用 Angular 的 ngMessages 指令来显示和隐藏输入的错误消息。看起来您正在尝试构建一些已经提供开箱即用的东西。

【讨论】：

在此代码中，重置按钮将模型重置为有效值，这不明白为什么重置不起作用。