1

Como faço para colocar um icon dentro do input?

input:

<input id="password2" class="form-control" placeholder="Enter password" name="Password" type="password" value="" ng-model="user.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/">

Gostaria de aparecesse um icon(esse) dentro do input do lado direito quando o usuário não digitar uma senha válida.

Alguém sabe como poderia fazer isso?

2

2 Respostas 2

0

Com input não dá, use a tag button que é mesma coisa que um input do tipo button, só que aceita html dentro.

Veja o código abaixo.

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<br>

    <div class="col-xs-6">
      <div class="input-group">
        <input class="form-control" id="password2"  placeholder="Enter password" name="Password" type="password" value="" ng-model="user.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/">

        <span class="input-group-addon">
          <button class="fa fa-exclamation" style="background:transparent;border:none"></button>
        </span>
      </div>
    </div>

0

Consegui utilizando form-group do bootstrap, colocando o has-feedback e form-control-feedback

Segue o código:

<div class="form-group has-feedback">
                        <label for="password2">Password:</label>

                        <input id="password2" class="form-control" placeholder="Enter password" name="Password"
                               type="password" value="" ng-model="user.Password"
                               ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/">
                        <i ng-show="Registration.Password.$error.pattern" class="fa fa-exclamation-circle fa-lg form-control-feedback" style="color: #A94446; margin-top: 9px;"></i>
    </div>                    

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .