html - 在 Angular 2 中使用 [(ngModel)] 时如何显示表单验证消息？

Question

我正在努力寻找验证错误消息。

我有一个表单，并且使用了 ngModel。现在我无法根据模式显示错误消息。我已经在component.ts中编写了验证。

有人可以帮我处理这两种类型的消息吗1.必填2. 相对于模式无效的表单的验证消息(使用模式验证)。

我在没有帮助的情况下搜索了上述所有地方，如果有人可以帮助我，我将不胜感激。

Component.html

<div class="card card-blur">
  <div class="card-header">
    <p>ACCOUNT INFORMATION</p>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-3">
        <!-- <p>Profile Image</p>
          <img src={{client.ProfileImage}} type="text" name="ProfilePic" style="width:60%"> -->
        <ba-picture-uploader [picture]="client.ProfileImage" [defaultPicture]="defaultPicture" [uploaderOptions]="uploaderOptions"></ba-picture-uploader>
      </div>
      <div class="col-md-9">
        <ul style="margin-top:20px;">
          <ul style="margin-top:20px;">
            <!-- <li>Take picture of id from your phone or mobile camera</li> -->
          </ul>
        </ul>

      </div>
    </div>
    <form #f="ngForm" (submit)="submit()">
      <fieldset>

        <div class="row form-inline">
          <div class="col-md-6">
            <div class="col-md-3"></div>
            <div class="col-md-9"></div>
          </div>
          <div class="col-md-6">
            <!-- <div class="form-group" style="margin-left: 16em; margin-top: -5em"> -->
            <div class="form-group" style=" margin-top: -3.5em">
              <div class="col-md-3">
                <label for="organization">Organization</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.Organization" type="text" name="Organization" class="form-control" id="organization"
                  placeholder="Organization">
              </div>
            </div>
          </div>
        </div>

        <div class="row form-inline">
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="fname">First Name</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ClientFirstName" type="text" name="FirstName" class="form-control" id="fname"
                  placeholder="First Name">
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="lname">Last Name</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ClientLastName" type="text" name="lastN" class="form-control" id="lname"
                  placeholder="Last Name">
              </div>
            </div>
          </div>
        </div>
        <br />
        <div class="row form-inline">
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="email">Email </label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ContactEmailID" name="Email" type="email" class="form-control" id="email"
                  placeholder="Enter email">
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="pnumber">Phone Number</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ContactMobileNo" name="PhoneNumber" type="text" class="form-control"
                  (keypress)="onlyNumberKey($event)" id="pnumber" placeholder="Phone Number" minlength="10" maxlength="10">
              </div>
            </div>
          </div>
        </div>
        <br />
      </fieldset>
      <button type="submit" class="btn btn-primary btn-sm" style="width:5em">Update</button>
    </form>

  </div>
  <!-- {{f.value | json}} -->
</div>

我已导入验证器的 Component.ts

this.form = fb.group({
  FirstName: [ "", Validators.compose([Validators.pattern(alphabetRegex), Validators.required])],
  LastName: ["", ([Validators.pattern(alphabetRegex), Validators.required])],
  Email: ["", Validators.compose([Validators.pattern(regexEmail), Validators.required])],
  PhoneNumber: ["", Validators.compose([Validators.required])],
});

Answer 1

在回答你的问题之前，我想提一个建议。在您的代码中，您混合了响应式(Reactive)/模型驱动表单 (Component.ts) 和模板驱动表单 (Component.html) 的概念。

1. 如果您希望遵循模板驱动的表单，请使用:

   <input type="text" id="fName" class="form-control" required pattern="[A-Z]{5}" [(ngModel)]="FirstName" name="FirstName" #fName="ngModel" />

   <div [hidden]="!fName.errors.required">FirstNameis required!</div>

   <div [hidden]="!fName.errors.pattern">FirstName must be at least 5 characters long</div>

在这种情况下，您不需要在 .ts 文件中包含表单构建器对象。

如果您使用响应式(Reactive)表单

<input type="text" class="form-control" formControlName="FirstName" id="FirstName" placeholder="Enter First Name"/>

<div *ngIf="form.controls.FirstName.errors.required">Field is required.</div>

<div *ngIf="form.controls.FirstName.errors.pattern">Can contain only alphabets and at least three characters required</div>