javascript - 根据 var 值更改 md-input-container 输入类型

Question

我希望 md-input-container 的输入类型为文本、数字或日期，具体取决于我在范围中定义的内容的值。

为此，我创建了 3 个不同的容器，除了 type 属性外，它们在各处都具有相同的值，并使用ng-show 根据我需要的容器更改可见的容器。

该部分工作得很好，但是当我在这个字段上写一些东西时，它会运行 3 种数据类型的验证，并且在控制台上显示许多错误:

"Error: [ngModel:datefmt] http://errors.angularjs.org/1.3.15/ngModel/datefmt?p0=1
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417
    at Array. (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:156:270)
    at Object. (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:228:41)
    at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:221)
    at b.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293)
    at eg.$$debounceViewValueCommit (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:227:364)
    at eg.$setViewValue (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:227:92)
    at HTMLInputElement.l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:153:466)
    at HTMLInputElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:32:389)"
"Error: [ngModel:datefmt] http://errors.angularjs.org/1.3.15/ngModel/datefmt?p0=10
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417
    at Array. (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:156:270)
    at Object. (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:228:41)
    at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:221)
    at b.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293)
    at eg.$$debounceViewValueCommit (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:227:364)
    at eg.$setViewValue (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:227:92)
    at HTMLInputElement.l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:153:466)
    at HTMLInputElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:32:389)"

我认为发生这种情况是因为它们都有相同的模型，但由于我将在同一个地方使用该值，所以我希望它是这样的。

Here is a codepen showing the problem.

我该如何解决这个问题？

Answer 1

您可以使用ng-if代替ng-show。

ng-show 在 dom 中创建一个元素，因为日期输入无法将数字解析为日期，因此会抛出错误。

希望这有帮助!