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

【问题标题】：Change md-input-container input type depending on var value根据 var 值更改 md-input-container 输入类型
【发布时间】：2017-03-27 12:46:47
【问题描述】：

我希望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.

我该如何解决这个问题？

【问题讨论】：

标签： javascript angularjs angular-material angular-ngmodel angularjs-ng-model

【解决方案1】：

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

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

希望这会有所帮助！

【讨论】：