Угловой дизайн материала действительный / неверный ввод

Question

Угловой дизайн материала действительный / неверный ввод

0

Кажется, не нашел относительного существующего ответа, поэтому..

Я использую дизайн углового материала, и я создаю форму входа/вверх. В тот момент, когда текст не вводится в поле, ярлык и нижняя граница становятся красными; это результат ng-required="true".

Я также хотел бы, чтобы он стал зеленым, когда информация верна, я не удивительно знаком с угловыми, поэтому не уверен, есть ли другая директива, которую я мог бы использовать?

В качестве альтернативы я предполагаю, что какой-то CSS сделает трюк; В одном из моих файлов CSS есть -

.ng-invalid.ng-dirty {
    border-color: #FA787E; (red)

}
.ng-valid.ng-dirty {
    border-color: #78FA89; (green)

}

Они были бы идеальными, но прикрепленные к нему классы, похоже, не работали (или им это не нравилось)

Вот код из одной строки ввода

<md-input-container>

    <label class="userlabel">Username</label>

    <input ng-model="credentials.username" type="text" ng-required="true" aria-label="password" class="inputtext ng-valid">

</md-input-container>

Если кто-то может помочь, это будет здорово, спасибо заранее

Mobeale 25 июнь 2015, в 18:37

Источник

Теги:

javascript

angularjs

css

angular-material

material-design

2 ответа

Ещё вопросы

Salal Aslam · Answer 1 · 2015-06-29T09-45-00.000Z

Вы на правильном пути, а css просто отсутствует .md-input как это

.md-input.ng-invalid.ng-dirty {
    border-color: #FA787E;
}
.md-input.ng-valid.ng-dirty {
    border-color: #78FA89;
}

jsfiddle
поочередно вы можете использовать !important с вами текущий css- border-color как этот border-color: #FA787E !important;

Shaohao Lin · Answer 2 · 2015-06-25T19-08-00.000Z

 <md-input-container>

   <label class='userlabel'>Username</label>

   <input ng-model='credentials.username' type='text' aria-label="password" class="inputtext" required>

 </md-input-container>

Я вынул требуемый ng и разместил его во входном теге. Таким образом, по умолчанию этот тег ввода будет выглядеть как ng-invalid. Дайте мне знать, если это сработает.

Дай попробовать и не повезло, я боюсь! Однако недействительная часть уже работает, пытаясь сделать ее зеленой, когда введенные данные верны