如何动态设置md-autocomplete的必填字段

时间:2017-04-05 08:51:30

标签: javascript html angularjs autocomplete angular-material

尝试在自定义目录中使用md-autocomplete

我希望根据两个条件要求该字段。一个被初始化(cond1)和一个变化(cond2)

我试过这样做: required="{{ cond1 && !cond2 }}"

但由于某些原因,即使cond1最初为md-autocompleteundefinedfalse始终也是必需的。它也不响应对cond2的值所做的更改。

验证器也不检查是否已设置选定项。它只是检查字段中是否有文本。

ng-required似乎没有做任何事情。

我是如何做到这一点的?

编辑:

这是我的指令.html

<div ng-form="dummyForm">
    <md-autocomplete
            md-input-name="{{ctrl.fieldName}}"
            md-selected-item="ctrl.dummyItem"
            md-selected-item-change="ctrl.setSelectedItem()"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.querySearch(ctrl.searchText)"
            md-item-text="item.display || item"
            md-min-length="0"
            placeholder="{{ ctrl.placeholder }}"
            ng-disabled="ctrl.selectAll || ctrl.isDisabled"
            required="{{ ctrl.isRequired && !ctrl.selectAll }}">
        <md-item-template>
            <span>{{ item.display || item }}</span>
        </md-item-template>
        <md-not-found>
            No results.
        </md-not-found>
    </md-autocomplete>
</div>
<div class="label-wrapper">
    <label
            class="checkbox-label"
            ng-if="ctrl.selectAll !== null">
        <input
                type="checkbox"
                ng-model="ctrl.selectAll"
                ng-change="ctrl.checkSelectAll()">
        {{ ctrl.checkboxName ? ctrl.checkboxName : 'Select all' }}
    </label>
</div>

它基本上只是一个自定义输入字段,允许用户从列表中选择一个值或单击复选框以“选择所有”项目。选中此复选框后,我不再需要md-autocomplete字段。

1 个答案:

答案 0 :(得分:0)

正如您在此demo plnkr中看到的那样ng-required可以正常使用。

视图

<form name="myForm">
    <md-autocomplete 
        md-autoselect=true
        placeholder="What is your favorite place?"
        md-item-text="item.display"
        md-items="item in ctrl.items"
        md-menu-class="autocomplete-custom-template"
        md-min-length="2"
        md-delay="ctrl.throttle"
        md-search-text="ctrl.searchText"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-select-on-match=true
        md-match-case-insensitive=true
        md-selected-item-change="ctrl.selectedItemChange(item)"
        ng-required="ctrl.cond1 && !ctrl.cond2"
        md-selected-item="ctrl.selectedItem">

   {{ myForm.$error }}

   <div>
       <md-button type="submit">Submit</md-button>
   </div>
</form>

AngularJS控制器

myApp.controller('MyCtrl', function ($scope) {
    var vm = this;
    this.cond1 = true;
    this.cond2 = false;
});
相关问题