针对预先输入的值进行Angular 2表单验证

时间:2017-06-16 07:13:53

标签: angular validation

HTML:

<form #accountForm="ngForm">
        <dl class="form-group">
          <dt><label>First Name</label></dt>
          <dd><input [(ngModel)]="firstName"
                     name="fname"
                     class="form-control"
                     type="text"
                     required
                     minlength="3"
                     maxlength="24"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Last Name</label></dt>
          <dd><input [(ngModel)]="lastName"
                     name="lname"
                     class="form-control"
                     type="text"
                     required
                     minlength="3"
                     maxlength="24"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Email</label></dt>
          <dd><input [(ngModel)]="email"
                     name="email"
                     class="form-control"
                     type="email"
                     disabled></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Mobile Phone</label></dt>
          <dd><input [(ngModel)]="phone"
                     name="phone"
                     class="form-control"
                     type="text"
                     required
                     pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Bio</label></dt>
          <dd>
            <textarea [(ngModel)]="bio"
                      name="bio"
                      class="form-control"
                      required
                      minlength="5"
                      maxlength="50"
                      maxLength="50"></textarea>
          </dd>
        </dl>

        <div class="form-actions">
          <button type="button"
                  class="btn btn-primary"
                  [disabled]="!accountForm.form.valid"
                  (click)="updateUserEntry(firstName, lastName, phone, bio)">Save changes</button>
        </div>
      </form>

如何强制Angular 2验证预先输入的值?

例如,这些输入是为了更改您的姓名,电话号码等,因此它们包含的值已经从数据库中引入并通过[(ngModel)]共享,但内置的ng2验证似乎只是验证新输入的值。 (也就是说,在用户重新输入已存在的值之前,“保存更改”按钮不会启用)

0 个答案:

没有答案