Component with ng-menssages don't work into a form

help
1

Hello
I have a problem.
This is my component bank You will note that is a form with a input text with validations angular

<form role="form" name="tarjetaFrm" nonvalidate>
<!-- NAME -->
  <div class="form-group" ng-class="{ 'has-error' : tarjetaFrm.name.$invalid && !tarjetaFrm.name.$pristine}">
    <input
    class="form-control"
    name="name"
    type="text"
    placeholder="Names"
    required
    minlength="1"
    maxlength="31"
    ng-minlength="1"
    ng-maxlength="30"
    ng-pattern="/^[a-zA-Zñáéíóú\s]+$/"
    ng-model="bank.creditBank.name"
    ng-disabled="deshabilitarCampos" />
    <div ng-messages="tarjetaFrm.name.$dirty && tarjetaFrm.name.$error" role="alert">
      <div style="color:red;" ng-message="required">Campo requerido.</div>
      <div style="color:red;" ng-message="minlength, maxlength">30 caracteres máximo</div>
      <div style="color:red;" ng-message="pattern">Únicamente caracteres alfabéticos</div>
    </div>
  </div>
</form>

So my <bank></bank> works perfectly, but when I put them inside into a another form, the validations don’t work
like this:

<form>
   <input />
   <bank></bank>
   <button></button>
</form>

The console dont sendme error, only the validations dont work
some ideas

THANKS FORR YOUR TIME