Измените тип ввода md-input-container в зависимости от значения var

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-show вы можете использовать ng-if.

ng-show создает элемент в dom, потому что ввод даты не может разобрать номер до даты, когда он выдаст ошибку.

Надеюсь, это поможет!