仅在字段为$ dirty时如何应用ng-pattern

Question

I have an input box that has an ng-pattern on it for basic link validation. Our PM wants us to have the 'http://' text already in the input before the user starts editing it...however i can't just put this text there as it breaks the ng-pattern validation and thus, doesn't show up.

<input type="text" ng-model="$parent.emailData.setting.button[2].link" 
 name="button2link" 
 ng-class="{invalid: step3Form.button2link.$invalid}"
 ng-pattern="link_pattern"/>

For reference, link_pattern is defined as

 $rootScope.link_pattern = /(https?:\/\/)(www)?[A-Za-z0-9.\-@_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/

I'm rephrasing my question for clarification (it's isn't the styles I'm worried about, that already works) Is there a way for me to have real text (not placeholder) 'http://' in my input field and still have the link pattern validation

When the user sees the input box, i want the text 'http://' to be there (right now it's just a placeholder) so they don't have to type it themselves.

Answer 1

You can try:

ng-class="{invalid: (step3Form.button2link.$dirty && step3Form.button2link.$error.pattern)}"

Answer 2

I have created a plunker which will help you.

http://plnkr.co/edit/GVAdjcjcYczmcmzoCqoF

<form role="form" name="signUpForm" class="form-horizontal">
  <div class="form-group">
      <label for="url" class="col-sm-4 control-label">URL</label>

      <div class="col-sm-8">
          <input type="text" class="form-control" name="url" id="url" placeholder="Enter last name"
                 ng-model="user.lastName" required="true" ng-pattern="/(https?:\/\/)(www)?[A-Za-z0-9.\-@_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/">

          <span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.required">
              <small class="text-danger">Please enter valid URL.</small>
          </span>
          <span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.pattern">
              <small class="text-danger">URL should have 2 to 25 characters.</small>
          </span>
      </div>
  </div>
</form>

Answer 3

http://jsfiddle.net/KGd8K/839/

<div ng-app ng-controller="formCtrl">
    <form name="myForm" ng-submit="onSubmit()">
        <input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required /> <span ng-show="{invalid: (myForm.price_field.$dirty && myForm.price_field.$error.pattern)}">Not a valid number!</span>
        <input type="submit" value="submit" />
    </form>
</div>