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

Question

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

为此，我创建了 3 个不同的容器，它们在所有地方都具有相同的值，但类型属性并使用 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 中创建一个元素，因为日期输入无法将数字解析为日期，因此会抛出错误。

希望对您有所帮助！

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

Change md-input-container input type depending on var value

javascript

angularjs

angular-ngmodel

angularjs-ng-model

angular-material