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

Angular中有两种类型的表单，即“模板驱动”表单和“反应式”表单。看来您正在混合它们。 [(ngModel)]属于模板驱动形式，而FormBuilder属于反应形式。要了解两种类型的验证，请参见https://angular.io/guide/form-validation

如果您想使用反应形式，请在https://angular.io/guide/reactive-forms

中了解更多信息

我建议您选择一个并坚持使用给定的项目。

如果验证对您至关重要，则反应形式可能是更好的选择，因为它们提供了强大而灵活的验证。

Answer 2

在[formGroup]元素中添加<form>和formControlName以形成元素。

看看这个示例演示-https://stackblitz.com/edit/angular-yeyiuk

Answer 3

在回答您的问题之前，我想提个建议。在您的代码中，您混合了Reactive / Model驱动的表单（Component.ts）和模板驱动的表单（Component.html）的概念。

如果您希望遵循模板驱动的形式，请使用：

<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文件中包含表单生成器对象。

如果您使用反应形式

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

Answer 4

使用FormControl中的Validators和@angular/forms进行表单字段验证，如下所示。

this.form = new FormGroup({
      FirstName : new FormControl( '', [ Validators.required, Validators.pattern(alphabetRegex) ]),
      LastName : new FormControl( '', [ Validators.required, Validators.pattern(alphabetRegex) ]),
      Email : new FormControl( '', [ Validators.required, Validators.pattern(regexEmail) ]),
      PhoneNumber : new FormControl( '', [ Validators.required ]),
  });

记住要在组件中添加导入FormControl，FormGroup和Validator，如下所示。

import { FormControl, FormGroup, Validators } from '@angular/forms';

您可以在 HTML 中显示验证，如下所示。

<form #f="ngForm" (submit)="submit()" [formGroup]="myform">       
    <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>
                      <span *ngIf="(
                      myform.get('FirstName').hasError('required') &&
                      myform.get('FirstName').touched)">Please enter first name</span>

                      <span class="error-message" *ngIf="(
                      myform.get('FirstName').hasError('pattern') &&
                      myform.get('FirstName').touched)">Enter valid first name </span>
                  </div>

            </div>
         </div>
    </div>
</form>

希望这会对您有所帮助。

Answer 5

如果您想查看带有angular的简单模板驱动的表单验证工作模型，可以查看以下内容： https://github.com/alokstar/Angular4FormValidation

它使用角度数据绑定实时显示了简单的错误消息。希望对您有帮助！

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

5 个答案: