如何使用 <md-autocomplete> 限制输入字段长度（最大长度）答案

【问题标题】：How to restrict input field length (max length) using <md-autocomplete>如何使用 <md-autocomplete> 限制输入字段长度（最大长度）
【发布时间】：2016-05-14 17:36:46
【问题描述】：

我想实现限制/限制用户只能输入 10 个数字的行为，例如：

有人知道怎么做吗？

我确实看到他们有一个属性 md-input-maxlength，但我无法让它工作，或者找到一个例子。

感谢您的投入。

【问题讨论】：

你能试试这个答案吗：How can you limit the value from input using AngularJS?（谢谢@tymeJV）。如果它的作品请给它投票。

标签： angularjs md-autocomplete

【解决方案1】：

延伸自约翰史密斯的回答，你可以试试

md-search-text-change="searchText = searchText.substring(0,10)"

【讨论】：

【解决方案2】：

我认为目前没有一种简单的方法可以做到这一点。但是，您可以使用md-search-text-change 作为一种变通的解决方法，只要该值比 X 长，您就可以用该值的前 X 个字符覆盖它。

示例笔here

但请记住，将文本更改为它的子字符串会导致再次调用文本更改事件。

【讨论】：

谢谢约翰，这满足了我的需要。感谢您对此的意见。我希望 md 开发者可以在以后的版本中提供这个钩子。
我建议在 GitHub 上打开一个关于它的问题。这似乎不是一个很大的功能，也许社区的某个人会做一个 PR。

【解决方案3】：

结合“md-maxlength”和“maxlength” 例如。输入类型="文本" md-maxlength="512" maxlength="512"

【讨论】：

实际测试这个，是不行的。 ng-maxlength、md-maxlength 和 maxlength 在用于 md-autocomplete 控件时均无效。

【解决方案4】：

这是工作代码：

    <md-autocomplete flex=""
                       required
                       ng-init="searchText=''"
                       md-input-name="autocompleteAddField"
                       md-input-minlength="2"
                       md-input-maxlength="10"
                       md-no-cache="true"
                       md-selected-item="newE.add"
                       md-search-text="searchText"
                       md-items="item in vm.queryAddressSearch(searchText)"
                       md-item-text="item.address"
                       md-require-match=""
                       md-floating-label="Address">
        <md-item-template>
          <span md-highlight-text="searchText">{{item.address}}</span>
        </md-item-template>
        <div ng-messages="newEntityForm.autocompleteAddField.$error" ng-if="newEntityForm.autocompleteAddField.$touched">
          <div ng-message="required">You <b>must</b> have a user address.</div>
          <div ng-message="md-require-match">Please select an existing address.</div>
          <div ng-message="minlength">Your entry is not long enough.</div>
          <div ng-message="maxlength">Your entry is too long.</div>
        </div>
      </md-autocomplete>

【讨论】：

实际测试这个，也行不通。 md-input-minlength 和 md-input-maxlength 对 md-autocomplete 控件没有影响。

【解决方案5】：

您可以使用 ng-maxlength="10"。这是一个例子。如果用户输入超过 10 个字符，则表单将无效。你可以看看这个。

<form name="form">
  <input type="text" ng-model="model" id="input" name="input" ng-maxlength="10" />
  <hr>
  input valid? = <code>{{form.input.$valid}}</code><br>
  model = <code>{{model}}</code>
</form>

【讨论】：

Pranab- 我知道，但这里使用 md-autocomplete 指令。
实际测试这个，是不行的。 ng-maxlength、md-maxlength 和 maxlength 在用于 md-autocomplete 控件时均无效。