如何仅在字段为$dirty时应用ng模式

How to apply ng-pattern only when field is $dirty

本文关键字：应用 ng 模式 dirty 何仅 字段      更新时间：2024-06-05

我有一个输入框，上面有一个用于基本链接验证的ng模式。我们的PM希望我们在用户开始编辑之前，在输入中已经有"http://"文本……然而，我不能只把这个文本放在那里，因为它破坏了ng模式验证，因此不会出现。

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

作为参考，link_pattern定义为

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

我正在重新表述我的问题以供澄清（这不是我担心的风格，已经奏效了）有没有一种方法可以让我的输入字段中有真正的文本（而不是占位符）"http://"，并且仍然有链接模式验证

当用户看到输入框时，我希望文本"http://"在那里（现在它只是一个占位符），这样他们就不必自己键入它。

您可以尝试：

ng class="｛无效：（step3Form.button2link.$dirty&step3Form.button2link.$error.pattern）｝"

我创建了一个plunker，它将帮助您。

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>

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>
相关文章：