2

I have a form that its fields are inside the component. Now I want to validate the fields. The problem is, my messages don't show up. also the pattern doesn't have any effects. I tried to fix it with help of this post, but no success.

Does someone have any idea how can I show my messages?

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>

component.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>

This is the pattern:

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

component.controller.js

bindings: {
    formReference: '<'
  }
GeoCom
  • 1,290
  • 2
  • 12
  • 33
  • I think you should be using ng-pattern="{{validation.validateWord}}" – Kumar Nitesh Aug 09 '17 at 14:58
  • It isn't so straight forward. The problem is the ng-messages doesn't recognize the form's name. It doesn't show none of the messages not just the pattern. – GeoCom Aug 09 '17 at 15:01
  • If you are not able to access parent component, then you have to slap require in your child component like require: { formReference: '^dataFormComponent' }, – Kumar Nitesh Aug 09 '17 at 15:05
  • @Knitesh I've tried but still not working. I'm not also sure if I did correctly. can you provide an example? – GeoCom Aug 09 '17 at 20:11

0 Answers0