Tengo una forma de que sus campos están dentro del componente. Ahora quiero validar los campos. El problema es que mis mensajes no aparecen. Además, el patrón no tiene ningún efecto. Traté de arreglarlo con la ayuda de estoenviar, pero sin éxito.

¿Alguien tiene alguna idea de cómo puedo mostrar mis mensajes?

index.html

  <form name="dataForm">
    <md-tabs>
      <valid-data form-reference="dataForm"></valid-data>
    </md-tabs>

    <div>
      <md-button type="submit" ng-click="vm.save()"> Save </md-button>
    </div>
  </form>

componente.html

<md-tab label="Info Data">
  <md-content class="md-margin">

    <div layout-gt-sm="row">
      <md-input-container class="md-block" flex-gt-sm>
        <label>Name</label>
        <input ng-model="vm.data.name" name="name" required
               ng-minlength="10"
               ng-maxlength="20"
               pattern="{{validation.validateWord}}">
        <div ng-messages="formReference.name.$error" ng-if="formReference.name.$touched">
          <div ng-message="required">Name is required.</div>
          <div ng-message="minlength">minLength Error msg.</div>
          <div ng-message="maxlength">maxLength Error msg.</div>
          <div ng-message="pattern">Invalid characters.</div>
        </div>
      </md-input-container>
    </div>
  </md-content>
</md-tab>

Este es elmodelo:

$rootScope.validation = {
    'validateWord': '^\\w+(-\\w+)*
component.controller.js
bindings: {
    formReference: '<'
  }
, // 0-9, a-z, A-Z, underscores + dashes
  };

component.controller.js

bindings: {
    formReference: '<'
  }